Chrome REM Bug

Encountered a bug that Chrome will incorrectly render REM units when initializing a page, causing the font to be too large.

Like what:

The normal should be this:

The reason is that in order to use REM units, we often html font-size set the setting to 62.5%, which makes it easier to calculate.

Usually the browser's default font size is 16px, this is Chrome's. So it would be 16*62.5%=10px convenient for us to use REM units to calculate the various font-size .

So the usual CSS reset section now has this setting:

 html {font-size:  62.5%; /* 62.5% of 1em (16px) = 10px = 1rem*/} body {font :  16px/1.618 Arial, Sans-serif; /* Pixel Fallback */font-size: 1.6REM; /* font-sizing with REM unit */}         

But the problem is that Chrome has a bug in place, ignoring the HTML settings. So when the page was initialized, there appeared the above font is too large, it should be rendered into a 16px font, was rendered into 16*1.6=25.6px size. But after refreshing the page, it's normal.

This bug appeared from the Chrome 31 version, and now Chrome 42 still exists--chromium issues 470449.

Workaround

There are some simple workarounds to circumvent this bug:

<script type="text/javascript"> document.body.style.fontSize = ‘1.6rem‘; </script> 

Or put the following code head inside:

<style>  body { font-size: 1.6rem; }</style> 

Of course, these are very elegant methods, the basic idea is to let the page repaint a bit.

Ultimately, the solution to the problem is to rely on Google. So long not solve this bug, is to force us to give up 62.5% instead of 100% to improve everyone's mental arithmetic ability?

Well, using REM means not considering IE 8 and its previous IE browsers, IE9 and IE10 should not use the font attribute shorthand if they want to use REM.

Chrome REM Bug