93

Apparently once paragraph of text reaches a certain length, Google Chrome on Android decides to resize the text and make it larger (causing all kinds of fun). Now I have a website where about half of the p-tags follow the size I've set and the other half change as they please - apparently depending on the length of the paragraph.

How on earth do I fix this?

Improve this question
1
  • 2
    Do you have an example? Also, which Android and Chrome version?
    – Junuxx
    Commented Jul 2, 2012 at 21:43

7 Answers 7

Reset to default
102

Add max-height: 999999px; to the element you want to prevent font boosting on, or its parent.

Improve this answer
8
  • 15
    Android Chrome only applies font boosting to elements with dynamic height. As soon as you specify a height or max-height, font boosting is not applied. Setting max-height to a large number is simple and should have no side effects.
    – moeffju
    Commented Nov 1, 2013 at 9:41
  • 1
    Just a warning for this. This solved the problem I had with Chrome fonts on android not playing nice. However it broke the ipad view of the site on specific versions of ios.
    – James McDonnell
    Commented Dec 3, 2013 at 20:52
  • As well as it caused some issues on ipad for css3 transitions.
    – James McDonnell
    Commented Dec 3, 2013 at 20:55
  • 4
    Using this significantly breaks the layout of many elements in Safari (5.1.7), even if you are not utilizing max-height or defined heights to begin with. A few sites were completely unusable, all of the structural div elements were collapsed awkwardly to the top of the page. Do not "blanket" your site with a max-height definition! Use only where needed, and test thoroughly.
    – Radley Sustaire
    Commented May 23, 2014 at 20:42
  • 4
    Whelp... Just when I thought I'd seen it all... Another crazy glitch with another crazy fix. FWIW I'm not seeing any issues in Safari, and min-height: 1px unfortunately had no effect. max-height: 999999px does the trick though. My case was very long content transitioning during route entry/leave. Font boosting happened either during or just after the transition, not sure which, but it caused a very noticeable shift.
    – Chase
    Commented May 20, 2018 at 3:19
63

Include the following <meta> tag in the document <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

This will correctly establish the view frame, and thus eliminate the need for "FontBoosting".

Improve this answer
9
  • 6
    This is definitely the preferred solution. If you care about how things look in mobile, then take ownership of your viewport!
    – Paul Irish
    Commented Nov 4, 2013 at 21:05
  • 22
    This doesn't disable font boosting, though.
    – Ed_
    Commented Nov 6, 2013 at 21:56
  • 1
    It certainly corrects unwanted scaling and I am going to use it in future.
    – Dizzley
    Commented Nov 6, 2013 at 22:04
  • 5
    As a note, I have <meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no"> and I'm still getting Chromes awful scaling
    – Sam
    Commented Nov 12, 2013 at 14:37
  • That's better because the font is legible. It's maintaining proportion while increasing size for legibility. Perfect for me.
    – Jen
    Commented Jan 30, 2014 at 7:00
28

There is now a CSS property you can set to control this:

text-size-adjust: none;

See https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust

Improve this answer
3
  • 3
    text-size-adjust: none worked for me on lastest android chrome.
    – Stepan Yakovenko
    Commented Apr 16, 2017 at 16:30
  • This is the preferred solution if you are using a gas deployed as web app.
    – jpp
    Commented May 6, 2019 at 16:55
  • Appears most mobile browsers support this code. Works fine!
    – Jay Brunet
    Commented Jun 8, 2023 at 3:15
16

Put this in your reset. html * {max-height:1000000px;}

Improve this answer
4
  • was causing issues with me for sticky footer, had to do html body * instead
    – Sabrina Leggett
    Commented Jan 15, 2016 at 20:07
  • This is a little too aggressive, unless you're actually experiencing an issue in many unpredictable elements. Otherwise it'd be better to target only the problem elements.
    – Chase
    Commented May 20, 2018 at 3:25
  • 1
    @Chase - in my case they were unpredictable (dynamic) elements, so we did have to use a * approach. That said, I'd argue this is one of those obscure things that you'd likely forget about and may cause problems in future, so for maintainability I'd probably have left it at * even if at the time it was just one/a few elements.
    – Ed_
    Commented May 21, 2018 at 10:27
  • Right after I found this thread and commented, I started seeing additional issues I suspected were related to font boosting. So, sure enough (at least for now) there's a * max-height... in my code LOL
    – Chase
    Commented May 21, 2018 at 20:16
6

After some tests this rule helped me out. Must be added either to the element containing boosted text or it's parent depending on the div/table structure.

element or parent element { 
    /* prevent font boosting on mobile devices */
    width: 100%;
    height: auto;
    min-height: 1px;
    max-height: 999999px;
}

Maybe the width and heigth values must be corrected according your needs.

Improve this answer
2

I found a solution for my pages: give the parent element a width and height! The font will not go outside those borders, and so it will remain small(er).

Improve this answer
1

This is called "font boosting" and is described in some detail in this WebKit bug. There's currently no way to disable it.

Improve this answer
1
  • 1
    Looks like it is indeed font boosting but it can be prevented by setting max-height: 999999px as @moeffju described.
    – Chase
    Commented May 20, 2018 at 3:23

Not the answer you're looking for? Browse other questions tagged or ask your own question.