how to override font boosting in mobile chrome

Question

Is it possible to override font boosting in mobile chrome? I searched the internet before ~including stackoverflow~.

I found that some people say it's impossible, and I also found meta tag that helped the text but also decreased the area of the text... which is not good..

Will appreciate your help..

Solution 1

adding following line to my reset.css worked for me

    html * {max-height:1000000px;}

Solution 2

There is no real possibility for disabling font boosting. There may be some hacks, but they are meant for something different and, in fact, do something different.

Solution 3

Try text-size-adjust:

html {
    text-size-adjust: none;
    -ms-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
}

Solution 4

It looks like there are a few people that have methods for making it work.

Add some CSS rules or give parent element width and height.

Solution 5

Matt and Kundan Sankhe answer are the best solution at the moment.

.element { max-height: 999999px; }

If the problem still occur try add this inside the head tag:-

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

But bear in mind that this can cause problem to image tag or image background-size tag.

View more solutions

Comments

[developdaly]

As far as I know it is still impossible, but there's work being done to allow control over it. It may even be available soon: bugs.webkit.org/show_bug.cgi?id=84186#c21

[Ron]

I guess that even if they'll fix it, It'll work only on the new versions... so it doesn't really help me

[robocat]

I had trouble finding information about the equivalent feature in Firefox Mobile because Gecko calls this feature "font inflation" and it is controlled by -moz-text-size-adjust: none;. Apparently the -moz-text-size-adjust property exists only to opt opt of this font size inflation, and doesn't do anything else (see dbaron.org/log/20111126-font-inflation ).

[Ron]

the max height trick didnt work for me. also I cannot give fixed height to the element so It doesnt help me.... thank you anyway.

[Kinlan]

Adding a max-height doesn't give it a fixed height, it just stops the element from reaching a height greater than 1000000px

[verdy_p]

In fact any value given to max-height that is larger than the effective height of the element will disable font-boosting in child elements.

[verdy_p]

However the selector you use here (html *) is not always selective;

[verdy_p]

For this reason I prefer setting the max-height on elements for which font-boosting will have a serious impact, leaving the other lements unchanged (notably because this global max-height may also not be effective when any element specifies its own max-height to avoid vertical overflows, with a lower value than the effective height: in that case, font-boosting will still apply, but this time the font size may not just be increased but sometimes decreased as well.

[verdy_p]

In all cases, font-boosting introduced by Chrome causes severe problems as font sizes, or graphics will no longer line-up in sizes as expected, and the layout may be deeply altered and even when querying via the DOM the computed font sizes or height will not reveal the effective computed sizes (note that font-boosting affects both the width and height of elements).

[verdy_p]

Typical things that foont boosting will completely break are the navigation bars, mixing icons and short text, and presentation of tabular data, or "tiles" layouts where all tiles are supposed to have the same size (in tiled layouts, each cell has a constnat width and height, their sizes are constrined by max-width and max-height set to the same value as width and height, with overflow disabled, independantly of their content (tiles are not in in a grid, as the number of columns is variable depending on the available total display width and tiles are flowing on as many rows as needed)

[verdy_p]

So I urge Chrome authors to implement a correct mechanism to disable font-boosting reliably; the "huge max-height" is really a trick; but Chrome still does not implement "text-size-adjust:none" proposed in CSS3 (Mozilla implements it with the "-moz-" prefix). Chrome should have implemented it only in an experimental feature, disabled by default in its advanced "labs" options, but not deployed it without a clean way to disable it in page layouts that it now breaks completely.

[verdy_p]

Also the effective font-sizes (and effective width and height) after boosting should be exposed somewhere in the CSS via the DOM: Chrome forgot to fo that, causing lots of troubles.

[verdy_p]

Chrome applies font-boosting also in elements using "line-height" when it is not set to an absolute dimension (with units in "px", "mm", "in", "pc", "pt"...) but relative (explicitly in "%" or "em", or unitless for inheriting the line-height in children elements that change the font-size without setting a new line-hieight).

[Jorge Arévalo]

Actually, this isn't working for me in Chrome 53 with this simple HTML: gist.github.com/jorgeas80/6529909f14ba1587ee41da2733ab1657

[JustAMartin]

@amn It works for me, when used on body, together with <meta name="viewport" content="width=device-width, initial-scale=1.0">. It stopped Android Chrome from decreasing fonts in some parts of my website.

[Armen Michaeli]

Chrome is the new Microsoft Internet Explorer. Gods help us all in months to come.

[Armen Michaeli]

Well, it does not work for me in my Chrome 86 on Android. I have the viewport tag in place and tried text-size-adjust on all kinds of susceptible elements. -webkit- prefix is deemed invalid and also has no effect. Explicitly setting max-height *does, howver, effectively disable auto-adjustment Chrome otherwise does, but that's irrelevant to your answer.

[Armen Michaeli]

The "bug" you are referring to is what Chrome developers consider illegible text sizes without Font Boosting. The solution to the bug is Font Boosting, as you can read from the issue.

[Armen Michaeli]

Didn't work for me. May be an outdated answer with an older version of Chrome.

[jegadeesh]

@amn -webkit-text-size-adjust is used in apple platforms