search

josdejong / jsoneditor

A web-based tool to view, edit, format, and validate JSON
http://jsoneditoronline.org
Apache License 2.0
11.23k stars 2.02k forks source link

Font size increasing for no reason on mobile Webview #1558

Closed mureatencio closed 6 months ago

mureatencio commented 7 months ago

When I try to render an editor and expand a section containing an URL node, the font size increases. This behavior only happens on "view" mode. Reproduced the issue on iOS and Android webviews. image

josdejong commented 7 months ago

Thanks for reporting. How can I reproduce this issue?

mureatencio commented 7 months ago

I'm just loading this html in a regular WKWebView (iOS):

<!DOCTYPE HTML>

https://github.com/josdejong/jsoneditor/assets/2531394/9e8bb6dc-e54f-4d20-ad28-1a4048776e92

the json is: { "a" : "123456789012345678901234567890123456789001234567890", "b" : { "c" : "http://123456789012345678901234567890123456789012345678", "d" : "1234567890123456789012345678901234567890123456789012345", } }

mureatencio commented 7 months ago

Also noticed the word wrap is disabled when the json contains a URL, is there any way to avoid it?

josdejong commented 7 months ago

Thanks for sharing.

I can indeed reproduce the issue on Mobile Safari, I tried in the Samsung internet browser too but there I don't see the increased font size.

I guess that Mobile Safari has certain default CSS styles that introduce this larger font. We would have to figure that out, help would be welcome.

Also noticed the word wrap is disabled when the json contains a URL, is there any way to avoid it?

It should indeed also wrap, we'll have to fix that. It should be possible to look at the CSS for wrapping used in the non-url values, and apply that to the url values too.

josdejong commented 7 months ago

For testing: I've put your example on https://jsbin.com/bajilob/edit?html

mureatencio commented 7 months ago

I was able to fix the font size changing via CSS with the property: -webkit-text-size-adjust: 100%; Still dealing with the wrap issue.

josdejong commented 7 months ago

Thanks for sharing. So where did you apply the CSS property? Will it solve the issue when I add the following CSS to 

.jsoneditor {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
josdejong commented 7 months ago

I managed to reproduce the issue with the url not wrapping: it only happens in Chrome (not in Firefox) and when the editor has mode view. I haven't yet found the cause.

See https://jsbin.com/bajilob/edit?html,output

josdejong commented 6 months ago

This should be fixed now in v9.10.4, can you give it a try @mureatencio?

mureatencio commented 6 months ago

Works like a charm, thanks a lot!

josdejong commented 6 months ago

👍