Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Font size increasing for no reason on mobile Webview #1558

Closed
mureatencio opened this issue Oct 26, 2023 · 11 comments
Closed

Font size increasing for no reason on mobile Webview #1558

mureatencio opened this issue Oct 26, 2023 · 11 comments
Labels
bug help wanted

Comments

@mureatencio
Copy link

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
Copy link
Owner

Thanks for reporting. How can I reproduce this issue?

@mureatencio
Copy link
Author

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

    <html lang="en">
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no' />
    <head>
        <!-- when using the mode "code", it's important to specify charset utf-8 -->
        <meta charset="utf-8">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.10.2/jsoneditor.min.css" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="https://unpkg.com/jsoneditor@9.10.2/dist/jsoneditor.min.js"></script>
    </head>
    <body>
        <div id="jsoneditor" style="width: 100%; height: 100%;"></div>
        <script>
            // create the editor
            const container = document.getElementById("jsoneditor")
            const options = {
                onChangeText: function(jsonText){
                    window.webkit.messageHandlers["onChangeText"].postMessage(jsonText);
                },
                search: false,
                mainMenuBar: false,
                enableTransform: false,
                limitDragging: true,
                mode: 'view'
                }
                const editor = new JSONEditor(container, options)
        
                // set json
                const initialJson = {
                "a" : "123456789012345678901234567890123456789001234567890",
                "b" :
                  {
                    "c" : "http://123456789012345678901234567890123456789012345678",
                    "d" : "1234567890123456789012345678901234567890123456789012345",
                  }
                }
            editor.set(initialJson)
            // get json
            const updatedJson = editor.get()
        </script>
    </body>
    </html>
Screen.Recording.2023-10-26.at.15.02.21.mov

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

@mureatencio
Copy link
Author

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

@josdejong
Copy link
Owner

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
Copy link
Owner

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

@mureatencio
Copy link
Author

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
Copy link
Owner

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
Copy link
Owner

josdejong commented Nov 1, 2023 •
edited

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
Copy link
Owner

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

@mureatencio
Copy link
Author

Works like a charm, thanks a lot!

@josdejong
Copy link
Owner

👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug help wanted
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@josdejong @mureatencio