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

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

Answer 2

adding following line to my reset.css worked for me

    html * {max-height:1000000px;}

Answer 3

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.

Answer 4

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; }

Answer 5

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;
}

Answer 6

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.