Chrome on Android resizes font

Question

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?

Do you have an example? Also, which Android and Chrome version? — Junuxx, Jul 02 '12 at 21:43

score 101 · Answer 1 · answered Oct 18 '12 at 23:14

101

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

answered Oct 18 '12 at 23:14

moeffju

4,363
2
23
22

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 Nov 01 '13 at 09: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 Dec 03 '13 at 20:52
As well as it caused some issues on ipad for css3 transitions. – James McDonnell Dec 03 '13 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 May 23 '14 at 20:42
@RadGH can you try using `{min-height:1px;}` instead? – moeffju Jul 02 '14 at 12:00
@moeffju 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 ](https://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. – Radley Sustaire Jul 02 '14 at 16:24
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 May 20 '18 at 03:19
@moeffju this works indeed, where did you find this solution ? what is the source. – Silver Moon Jun 14 '19 at 14:59

score 63 · Answer 2 · answered Jan 03 '13 at 01:29

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

answered Jan 03 '13 at 01:29

Joe DeRose

3,438
3
24
34

6

This is definitely the preferred solution. If you care about how things look in mobile, then take ownership of your viewport! – Paul Irish Nov 04 '13 at 21:05
22

This doesn't disable font boosting, though. – Ed_ Nov 06 '13 at 21:56
1

It certainly corrects unwanted scaling and I am going to use it in future. – Dizzley Nov 06 '13 at 22:04
5

As a note, I have `` and I'm still getting Chromes awful scaling – Sam Nov 12 '13 at 14:37
That's better because the font is legible. It's maintaining proportion while increasing size for legibility. Perfect for me. – Jen Jan 30 '14 at 07:00
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. – Dilip Rajkumar May 05 '14 at 11:05
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. http://isitvivid.com/blog/google-penalty-non-responsive-websites – nealmcb Apr 10 '15 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. – JustAMartin Feb 25 '20 at 08: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. – Michael Scheper Oct 18 '21 at 21:41

score 27 · Answer 3 · edited Jun 08 '23 at 03:14

27

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

edited Jun 08 '23 at 03:14

PJ Brunet

3,615
40
37

answered Feb 01 '17 at 15:48

Gareth

1,252
1
12
7

2

text-size-adjust: none worked for me on lastest android chrome. – Stepan Yakovenko Apr 16 '17 at 16:30
This is the preferred solution if you are using a gas deployed as web app. – jpp May 06 '19 at 16:55
Appears most mobile browsers support this code. Works fine! – PJ Brunet Jun 08 '23 at 03:15

score 16 · Answer 4 · answered Nov 06 '13 at 21:58

16

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

answered Nov 06 '13 at 21:58

Ed_

18,798
8
45
71

was causing issues with me for sticky footer, had to do html body * instead – Sabrina Leggett Jan 15 '16 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 May 20 '18 at 03: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_ May 21 '18 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 May 21 '18 at 20:16

score 6 · Answer 5 · answered Mar 22 '13 at 18:50

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.

score 2 · Answer 6 · edited Jul 13 '12 at 00:05

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

edited Jul 13 '12 at 00:05

Kijewski

25,517
12
101
143

answered Jul 12 '12 at 08:07

Randy Vroegop

21
2

score 1 · Answer 7 · answered Jul 06 '12 at 05:53

1

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

answered Jul 06 '12 at 05:53

Boris Smus

8,220
2
36
33

1

Looks like it is indeed font boosting but it can be prevented by setting `max-height: 999999px` as @moeffju described. – Chase May 20 '18 at 03:23

Chrome on Android resizes font

7 Answers7

Linked

Related