15

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-size of 62.5% on thehtml so I can more easily set font sizes later on in the stylesheet, I then set a font-size of 1.4rem on the body so unstyled elements have a base font-size of at least 14 pixels, see the code below:

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

The problem is, Chrome seems to handle this in a strange way ... Chrome seems to set the font sizes correctly on the inital page load, but on subsequent refreshes the font sizes are way bigger than they should be.

SEE FIDDLE (HTML copied below for future reference)

<!DOCTYPE html>
<html lang="en-GB">
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <p>This is a test, this font should have font-size of 14px.</p> 
        <p>This is a test, this font should have font-size of 14px.</p> 
        <p>This is a test, this font should have font-size of 14px.</p> 
    </body>
</html>

Remember, you might need to hit run once or twice in Chrome to see said effect.

Does anybody know what is causing this or if there's a way around it? Am I committing a crime by setting a 62.5% font-size on the html element (I realise there are arguements against doing so)?

18
  • "Am I committing a crime by setting a 62.5% font-size on the html element (I realise there are arguements against doing so)?" No, you're not. It should be 62.5% of the user-set default font size, which as you know is typically 62.5% of 16px = 10px.
    – BoltClock
    Nov 20, 2013 at 15:32
  • I've tried and tried and tried but I cant repeat your issue :(
    – SW4
    Nov 20, 2013 at 15:35
  • @ExtPro I'm pretty sure it's not restricted to my install of Chrome (just had a colleague replicate the issue) try viewing: jsfiddle.net/HfwSm/embedded/result in Chrome and refreshing the page a couple of times after it finishes loading.
    – Sean
    Nov 20, 2013 at 15:38
  • FWIW, I was able to reproduce this with the steps described in the question.
    – BoltClock
    Nov 20, 2013 at 15:39
  • @BoltClock thanks - don't suppose you've got any ideas what could be causing this / how to fix?
    – Sean
    Nov 20, 2013 at 15:40

7 Answers 7

22

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.

1
  • This seems to be the best fallback solution to me. Apr 9, 2014 at 9:52
9

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

3
5

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

I found

html { font-size: 100%; }

seems to work for me.

1
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 ;)

2
  • Works really well for everything but padding/margins unfortunately (and widths too presumably, although I haven't checked them yet!).
    – Sean
    Feb 5, 2014 at 19:05
  • 1
    This worked a lot better for me. The * selector is to agressive making things, well, complicated.
    – Todilo
    Feb 28, 2014 at 12:32
3

This seems to be a Chrome bug; see Issue 319623: Rendering issue when using % + REMs in CSS, and/or a partly-merged duplicate: Issue 320754: font-size does not inherit if html has a font-size in percentage, and body in rem

1
  • 1
    Seven years later this bug still exists. Jun 15, 2020 at 0:36
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 !

0
0

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 */
}
1
  • Using pixels will ignore a userconfigured font size in Chromium based browsers (not in Firefox). Jun 15, 2020 at 0:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.