#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2011
    Posts
    4
    Rep Power
    0

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


    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
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    This might help: https://developer.mozilla.org/en-US/...xt-size-adjust Use it sparingly and with due caution.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2011
    Posts
    4
    Rep Power
    0
    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!

IMN logo majestic logo threadwatch logo seochat tools logo