Google Chrome and REM units - a little quirk
I noticed something today whilst working on a new client project, that seems to be a bug in the way Chrome calculates rem
units.
By default, I tend to set the body font size to 62.5% which works out to be 10px, then it makes the maths for font sizing easier. Today however I noticed that doing this:
html {
font-size: 62.5%;
}
body {
font-size: 1.4rem; /* should compute to 14px */
}
…in Chrome, the body text wasn't 14px but in fact 20px. It was ignoring the 62.5% declaration, but only for the body calculation.
Changing this use em
instead of rem
seems to fix the problem:
body {
font-size: 1.4em;
}
As the rest of the site uses rem
nothing else is affected.
P.S I did find a bug that seems to suggest this is fixed: https://code.google.com/p/chromium/issues/detail?id=319623 however for me it's still a problem. The above fix worked well for me though :)