Dev Shed Forums

**devshedrocks**

I've found that in the Chrome and Firefox mobile browsers, an h1 over a certain length increases the font size of all statically-positioned text on the page but not absolutely-positioned text. The length of the h1 required to trigger the problem seems to depend on the browser and (probably) the device.

For example, on a Nexus 4 using Chrome or Firefox, the h1 text and statically-positioned div text from the following code renders too large while the absolutely-positioned div text renders in normal size. Removing 2 characters of text from the h1 tag causes all text to render in normal size in Chrome. Removing 2 more characters causes all text to render in normal size in Firefox.

Code:

<html>
<body style="margin: 0;">
<h1 style="font-size: 1em;">h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1</h1>
<div style="font-size: 1em;">div</div>
<div style="position: absolute; font-size: 1em;">absolute</div>
</body>
</html>

Does anyone know why this happens and how to control it? I posted this at stackoverflow but it hasn't gotten much attention:

http://stackoverflow.com/questions/18422311

**Kravvitz**

This might help: https://developer.mozilla.org/en-US/...xt-size-adjust Use it sparingly and with due caution.

**devshedrocks**

Got it! The big break was the edit in stackoverflow question 15861093 (I can't post URLs yet).

"Chrome on android phones uses font boosting, so -webkit-text-size-adjust is being ignored no matter what value you set. You can disable font boosting it by setting max height to something large(100000px or so) see this bug."

That's it in a nutshell. My example code can be "fixed" by setting h1,div {max-height: 100000px;}. Thank you for your help with this!

Dev Shed Forums

Thread: Long h1 increases font size of all statically-positioned text in mobile browsers

Long h1 increases font size of all statically-positioned text in mobile browsers