Long h1 problem with mobile browsers

HTML & CSS
1

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.

<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?

2

It may not have anything to do with the h1. Try adding this to your CSS and see if it changes anything:

-webkit-text-size-adjust: none;
3

Does it happen when you put a valid !DOCTYPE at the top of the page?

4

It may not have anything to do with the h1. Try adding this to your CSS and see if it changes anything:

I tried applying -webkit-text-size-adjust: none; to the html, body, and * but there is no change. I also tried 100% instead of none.

Does it happen when you put a valid !DOCTYPE at the top of the page?

I added <!doctype html> to the top but there is no change.

Is there a place online I can post this code so you guys can try it in mobile Chrome or Firefox?

5

It seems to have something to do with a new, non-fully supported text resizing technology still under development.

I Googled : Firefox mobile nexus h1

and came up with the following possiblities… There seemed to be plenty more.

http://code.google.com/p/chromium/issues/detail?id=152459

“This is an experimental technology”

6

Got it! The big break was the edit in the main answer here:

http://stackoverflow.com/questions/15861093/what-does-webkit-text-size-adjust-do

“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!