Chrome on Android resizes font

Asked 2/7, 2012 at 7:9 Answered 1/2, 2017 at 15:48

android html css google-chrome font-size

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?

Gleda answered 2/7, 2012 at 7:9 Comment(1)

Do you have an example? Also, which Android and Chrome version? – Umbra 2/7, 2012 at 21:43

102

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

Schweiker answered 18/10, 2012 at 23:14 Comment(8)

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. – Schweiker 1/11, 2013 at 9:41

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. – Tessie 3/12, 2013 at 20:52

As well as it caused some issues on ipad for css3 transitions. – Tessie 3/12, 2013 at 20:55

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. – Sussman 23/5, 2014 at 20:42

@RadGH can you try using {min-height:1px;} instead? – Schweiker 2/7, 2014 at 12:0

@Schweiker Using min-height in the same situation does not break safari. I can't test if it disabled font boosting anymore though. According to [Bug 84186 ](bugs.webkit.org/show_bug.cgi?id=84186), the parent or grandparent (but not higher) "must have a max-height greater than the original element" in order to disable font boosting. I cannot confirm if this is actually the case. – Sussman 2/7, 2014 at 16:24

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. – Christabelle 20/5, 2018 at 3:19

@Schweiker this works indeed, where did you find this solution ? what is the source. – Unbolted 14/6, 2019 at 14:59

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".

Tincture answered 3/1, 2013 at 1:29 Comment(9)

This is definitely the preferred solution. If you care about how things look in mobile, then take ownership of your viewport! – Horton 4/11, 2013 at 21:5

This doesn't disable font boosting, though. – Retail 6/11, 2013 at 21:56

It certainly corrects unwanted scaling and I am going to use it in future. – Automatic 6/11, 2013 at 22:4

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 – Messina 12/11, 2013 at 14:37

That's better because the font is legible. It's maintaining proportion while increasing size for legibility. Perfect for me. – Underproof 30/1, 2014 at 7:0

This works but it has an issue, your website loads with full width and height instead of fit to browser window. It mainly causes problem in vertical orientation. – Unparliamentary 5/5, 2014 at 11:5

Thanks - this seems to work well. But I'm aghast that plain old-fashioned web 1.0 sites are rendered so poorly by modern mobile browsers, and considered "non-responsive" and "broken" by google. isitvivid.com/blog/google-penalty-non-responsive-websites – Merimerida 10/4, 2015 at 23:58

In my case it alone did not work - the font was nicely readable in short paragraphs, but unexpectedly small in longer paragraphs. I had to add text-size-adjust: none to prevent Android Chrome from decreasing text size for the longer paragraphs. – Independence 25/2, 2020 at 8:54

@Sam: user-scalable=no is a great way to make people who don't have perfect vision leave your site, especially if nobody checks whether images are at all viewable on a small screen. FireFox on Android has an option for overriding this, for good reason. – Noose 18/10, 2021 at 21:41

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

Unfriendly answered 1/2, 2017 at 15:48 Comment(3)

text-size-adjust: none worked for me on lastest android chrome. – Aparejo 16/4, 2017 at 16:30

This is the preferred solution if you are using a gas deployed as web app. – Isobel 6/5, 2019 at 16:55

Appears most mobile browsers support this code. Works fine! – Unlimber 8/6, 2023 at 3:15

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

Retail answered 6/11, 2013 at 21:58 Comment(4)

was causing issues with me for sticky footer, had to do html body * instead – Barina 15/1, 2016 at 20:7

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. – Christabelle 20/5, 2018 at 3:25

@Christabelle - 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. – Retail 21/5, 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 – Christabelle 21/5, 2018 at 20:16

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.

Ineffaceable answered 22/3, 2013 at 18:50 Comment(0)

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).

Conceive answered 12/7, 2012 at 8:7 Comment(0)

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

Jugglery answered 6/7, 2012 at 5:53 Comment(1)

Looks like it is indeed font boosting but it can be prevented by setting max-height: 999999px as @Schweiker described. – Christabelle 20/5, 2018 at 3:23

Recommended topics

Hot tags