How to fix a Large Font bug in Chrome

Recently, I encountered a very weird bug recently most specifically in Chrome. When you visit a webpage, all of a sudden the fonts are really large. And upon refresh, the same fonts become smaller. And it seems to happen consistently in Chrome than other browsers. It took one heck of a time to find the solution to this bug.

It appears to be a “known issue” for Chrome. But there is a solution. Remember when font-sizes used to be em’s ? That brought us with propagation issue, which means if the font-sizes were nested from one div to another, the font would either become larger or smaller. That was weird bug too. So, I first thought changing all the fonts to rem or back to px would do the job but apparently, it didn’t.

Solution:

So, it appeared that, if you remove declaration of font-sizes in the body tag, that seems to resolve the issue. For example, I had something similar to

All I did was remove that rem declaration on this particular tag. So, all I now have is

This seems to resolve the large font bug on chrome. You do not have to remove the rem declaration on all other font-sizes you have defined. Interestingly, this works and I am a happy man. :-)

Comments are closed.