25

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

Ron
  • 3,975
  • 17
  • 80
  • 130
  • 2
    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: https://bugs.webkit.org/show_bug.cgi?id=84186#c21 – developdaly Nov 19 '12 at 14:57
  • I guess that even if they'll fix it, It'll work only on the new versions... so it doesn't really help me – Ron Nov 19 '12 at 15:07
  • 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 http://dbaron.org/log/20111126-font-inflation ). – robocat Dec 29 '13 at 21:35

8 Answers8

36

adding following line to my reset.css worked for me

    html * {max-height:1000000px;}
Matt
  • 384
  • 3
  • 2
  • 1
    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 Apr 30 '16 at 21:37
  • However the selector you use here (html *) is not always selective; – verdy_p Apr 30 '16 at 21:38
  • 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 Apr 30 '16 at 21:41
  • 1
    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 Apr 30 '16 at 21:46
  • 1
    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 Apr 30 '16 at 21:49
  • 6
    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 Apr 30 '16 at 21:53
  • 1
    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 Apr 30 '16 at 21:54
  • Actually, this isn't working for me in Chrome 53 with this simple HTML: https://gist.github.com/jorgeas80/6529909f14ba1587ee41da2733ab1657 – Jorge Arévalo Oct 22 '16 at 09:32
  • 1
    Chrome is the new Microsoft Internet Explorer. Gods help us all in months to come. – Armen Michaeli Nov 23 '20 at 13:16
7

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.

looper
  • 1,929
  • 23
  • 42
5

Try text-size-adjust:

html {
    text-size-adjust: none;
    -ms-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
}
fabb
  • 11,660
  • 13
  • 67
  • 111
  • 1
    @amn It works for me, when used on `body`, together with ``. It stopped Android Chrome from decreasing fonts in some parts of my website. – JustAMartin Feb 25 '20 at 09:05
  • 2
    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 Nov 23 '20 at 13:18
  • @amn -webkit-text-size-adjust is used in apple platforms – jegadeesh Apr 14 '22 at 07:46
2

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.

Community
  • 1
  • 1
soycharliente
  • 777
  • 2
  • 7
  • 26
  • 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. – Ron Nov 24 '12 at 08:31
  • 1
    Adding a max-height doesn't give it a fixed height, it just stops the element from reaching a height greater than 1000000px – Kinlan Apr 08 '13 at 05:01
1

It is a webkit official bug. You can check on Webkit official site

You have to target only specific element where you have to override font boosting rather than targeting unwanted elements. i.e. 

p {
   max-height: 999999px;
}
Kundan Sankhe
  • 224
  • 1
  • 11
  • 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 Nov 23 '20 at 13:23
1

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.

phpsmart.info
  • 49
  • 6
-1

Android Chrome only applies font boosting to elements with dynamic height. As soon as you specify a height,max-height or line-height, font boosting is not applied. But you should be careful of the inline element like span whose height or max-height property is invalid. In that case you can set the display to inline-block as the below code or other box types whose height can be setted.
span { font-size:12px; line-height:12px; display:inline-block; }

Bayley Gass
  • 1
  • 1
  • 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). – verdy_p Apr 30 '16 at 21:58
-2

For desktops, and likely mobile (haven't tested mobile), you can disable font size boosting in Chrome and FF by setting a base font size on the HTML element. For example:

html {
  font-size: 16px;
}

This is less hacky than max-height. But, still dirty from an accessibility standpoint.

You can also use jQuery to set this if you have to.

Mark Caron
  • 1