Font issue on Chrome mobile where font size is rendered bigger

3
votes

I have an issue with Chrome mobile where some text is rendered in bigger font size than it is in CSS. I checked in developer tool and find that those text have inherit the correct font size, but still rendered 5px bigger in the computed style.

I find this post Fix font size issue on Mobile Safari (iPhone) where text is rendered inconsistently and some fonts are larger than others? but -webkit-text-size-adjust doesn't work for me here.

I have checked in different mobile browsers including Dolphin, Opera Mobile and Safari, all rendered the text correctly except Chrome mobile.

Update: Solved, it caused by the setting of Chrome Mobile to render the text bigger. I don't think this is something we can block in the setting.

1
cssgoogle-chromemobile
Can we see your example? – mmcglynn
I have edited my question to include the example – Ian Hsieh
check this answer: stackoverflow.com/a/12965146/1428241 – Barlas Apaydin
possible duplicate of Chrome on android resizes font – Barlas Apaydin

1 Answers

2
votes

The issue is that between Chrome Mobile 18 and Chrome Mobile 25 the rendering of fonts changed. It appears that the Chrome scaling feature at 100% is actually up scaling the fonts. We had to set the Chrome scaling feature down to 85% to get the fonts to not upscale.

Also it appears that if we touch anything on the web page the fonts on the page re-adjust to the proper size. This shifting between scales is VERY concerning as it affects applications is an extremely negative way. Especially if you are attempting anything that needs to ensure any psychometric validity.