Bug 178383 – Wrong Font Size in Landscape Orientation

• Component: CSS
• Status: NEW

[Tobi Reif]

Created attachment 324010 [details]
screenshot of portrait orientation

The URL: https://tobireif.com/demos/bubbles/

In mobile Safari: (eg iOS 11 iPhone 8 simulator):

Please see the supplied screenshots. In portrait mode, the font size of the text "SVG, animated using SMIL ..." is as specified in the CSS. But in landscape mode it is larger than specified in the CSS.

I can set the font size of the info para (which appears when I tap on "show info") (CSS class "revealed-text") and of the button text, but in landscape mode I can only set the font size of the button text - the font size of .revealed-text is wrong and can not be set/changed in landscape mode. I tried setting large values via the Safari dev tools: in landscape mode this only had an affect on the button text - not on the text in .revealed-text.

Please make sure that the CCS rule font-size:16px has an effect on all the targeted elements & text, in landscape mode, as it does in portrait mode.

[Tobi Reif]

Created attachment 324011 [details]
screenshot of landscape orientation

[Simon Fraser (smfr)]

Does "-webkit-text-size-adjust: none" fix this?

[Tobi Reif]

Thanks for the tip, "-webkit-text-size-adjust: none" works.

But that's just a workaround. There are two issues/bugs:

1. It happened only in landscape mode, that seems odd and might point to an issue in the code.

2. It should not happen at all. Please make sure that mobile Safari always (and in all orientations and inside all elements) renders the font-size I specify in the respective CSS.

If users want to change the font size they can zoom in, and you could also offer additional UI options for changing font size.

But (unless there are user prefs/settings/zoom in effect) I need my text to get rendered at the specified font size - without being required to add vendor-specific CSS.