bdchauvette
commented
4 years ago Thanks for the report, and for looking into the cause! Text autosizing strikes again :weary:
Reproducing
I put together a code sandbox to try reproduce the problem: https://codesandbox.io/s/leipzigjs-3-ilwy6
After playing around with it on my device (Chrome 78.0.3904.108, Pixel 2 XL), it seems to only work as expected if the viewport meta tag is set to width=device-width:
However, if I comment out that tag in the sandbox, or if I enable "Desktop site" in the Chrome menu, it enables the text autosizing and the issue appears:
I tried switching to a flexbox based layout, which you can see commented out in the code sandbox. This fixed the font scaling issues, but it led to even worse layout issues:
Possible Solutions
Use viewport meta tag
<meta name="viewport" content="width=device-width">According to this comment on SO, the tag disables text autosizing ("font boosting"), and things work as expected.
CSS Hacks
From googling and stack overflowing, it seems like text autosizing is only applied to really wide elements that have a dynamic height. One of the suggested hacks I've seen around is to put a huge max-height on a parent of your content, which will prevent text autosizing by removing the "dynamic height" attribute.
Conclusion
I'd definitely like to find a robust solution to this, but I'm worried that glosses will never be resized correctly because they're almost never going to be wide to trigger the autosizing heuristics.
I think for now the best we can probably do is put a link to this issue in the docs :disappointed:
When I view anything rendered by leipzig.js on my smartphone (using Chrome on Android), the font shrinks to an unreadably tiny size.
I've looked into it a bit, and it seems to be caused by the float:left used in the CSS, which doesn't get caught by the built-in -webkit-text-size-adjust, so when the rest of the text gets inflated automatically, the Leipzig example gets left behind.
I haven't found a solution so far.