Chrome not respecting rem font size on body tag?

Question

I\'ve taken to using rem\'s to size fonts in recent projects, then using px as a fallback for older versions of IE.

I\'ve also been setting a font

Answer 1

Yes, this is a known bug in Chrome, which has been linked already.

I found

html { font-size: 100%; }

seems to work for me.

Answer 2

The answer of Patrick is right. We have the same issue on Android 4.4.3 WebView.

Before:

html {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
}

After:

html {
    font-size: 62.5%;
}

body {
    font-size: 1.6em;
}

With em and not rem, it works !

Answer 3

The easiest solution that I have found is to simply change the body definition to

body {
    font-size: 1.4em;
}

Because it is the body, you don't have to worry about compounding – just use rems everywhere else.

Answer 4

The * selector is very slow, as the author of this bug in Chrome, I'd advise a workaround like this until the bug is fixed:

body > div {
    font-size: 1.4rem;
}

Provided you always have a wrapper div anyway ;)

Answer 5

The way I fix this is by setting an absolute font-size in the body-element. For all the other font-sizes I use rem:

html {
    font-size: 62.5%;
}

body {
    font-size: 14px;
}

.arbitrary-class {
    font-size: 1.6rem; /* Renders at 16px */
}

Answer 6

Try:

html { font-size: 62.5%; } /* font-size: 62.5% now means that 1.0 rem = 10px */
*{font-size: 1.4rem;line-height: 1.6rem; }
body { background: #fff; font-family: arial;  }

Seems to look better on refreshing the page :)

FIDDLE