I'm writing a CSS book

JavaScript archives Compatibility Thidrekssaga QuirksBlog Donations CSS book Politics Mobile About COH

contact

A note on weird font size changes in mobile Chrome

Yesterday I stumbled upon one case in which some mobile Chromes change the font size of elements without having been ordered by the CSS. This article gives a quick overview.

My test is incomplete and will likely remain so, since these changes only occur in fairly unusual circumstances, and spending days and days of research time seems wasteful. Nonetheless I want to leave a note for researchers who come after me.

See the two screenshots below of this and this page, taken on Chrome 43 on an HTC M8. The only CSS on these pages sets the width of the test boxes. The same effect occurs on the Samsung Chromium 34, but not necessarily on all Chromia. In particular, Opera 30 does not have this behaviour.

As you see the font sizes are different. In particular, in the screenshot on the right the font size of the last two boxes is significantly smaller than the one of the first box and the text above, even though the CSS does not contain any font-size declaration and the font size should hence be 16px everywhere.

As far as I can see this behaviour takes place when three specific circumstances occur:

1. The page does not have a meta viewport, and also does not have a desktop CSS layout that stretches the page horizontally. (In my tests I emulated a desktop CSS layout by adding my generic QuirksMode templates to the pages. The effect disappeared.)
2. The affected boxes have a width that’s clearly smaller than the layout viewport’s (though you can see that the layout viewport width itself changes; this likely has something to do with the effect).
3. The page contains at least one element, in this case the Test Text paragraph, that is higher than a certain value. I do not know the exact height that triggers the behaviour, though I advise future researchers to concentrate on the 50-200px range.

Circumstance 1, in particular, is rare. Usually a site is either responsive or has a desktop layout. That’s the reason I decided not to continue this avenue of research. It would likely take me days to figure out the exact values and circumstances, and once I’m done the results will have little practical applicability.

Update: A follower sent me this Google document about text autosizer, which appears to be what's happening here.

Safari note

Safari behaves differently: it always shows the middle box (the narrowest) in a smaller font, even if the page has a desktop layout, and regardless of the height of the other elements on the page. The narrowest box has a font size equal to the other text when a meta viewport is applied, though.

I intended to provide a screenshot, but as usual it was totally fucking impossible to get a photo off my iPhone and on to my computer. Apple fail.