Google Chrome and REM units - a little quirk

by Paul Sebborn

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 :)