CODEWITHSUNDEEP
htmlcssgoogle-chrome
Josh
Josh

Reputation: 53

Chrome font size loads large and then reduces

I'm using em units in my site's CSS. When I load a page of the site in Chrome, all the text will load in a very large font size. If I resize the browser window or load the developer console, the font size will then revert back to the 'correct' size. Sometimes if I flick through pages on the site, it will do the same or behave erratically (starting off large, sometimes starting off normal size).

I cannot replicate this in Safari or Firefox, so thinking it must be an issue in the way Chrome is interpreting my CSS or my em units.

Any ideas on why this is happening? If I remove all the em units and use px then it works fine (which perhaps is a solution but doesn't help me understand em).

(Using: Chrome 32, Macbook Air, OS 10.8.5, a custom Wordpress theme).

Some CSS:

body {
    margin: 0 auto;
    color: #404040;
    font-family: sans-serif;
    font-size: 1.6rem; 
    line-height: 1.5;
    padding: 1em; }

(if I use font-size:16px here it will work fine, but then what's the point of em / rem)

Upvotes: 2

Views: 3367

Answers (3)

gracehcoote
gracehcoote

Reputation: 61

I had the same problem as you actually. I recently started using rem instead of em and it is much better since you don't have to worry about nested elements, such as list items, multiplying the value. However, I noticed that the font was loading too large and then resizing.

In my CSS, I originally had reset the font using this:

html { font-size: 62.5%; }

You're probably already aware why, but this just means that 1em would equal 10px. I then had font-size: 1.4rem in the body to set the base font size to 14px.

To fix the issue you mentioned:

Try setting your html font-size to 10px, not a percentage value, and then use rem from then on. Seems to be working for me anyway.

Upvotes: 3

eu.vl
eu.vl

Reputation: 192

CSS3 introduces a few new units, including the rem unit, which stands for "root em".

The em unit is relative to the font-size of the parent, which causes the compounding issue. The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that.

You can try font-size: 1.6em; /* EM not REM */ but anyway it might not works as far as 1em is equal to the current font size.

You might use px instead or set px in body and use em after.

Upvotes: 2

Znuff
Znuff

Reputation: 138

Needs more info. A live URL would be appreciated.

Can not reproduce using just this code:

body {
    margin: 0 auto;
    color: #404040;
    font-family: sans-serif;
    font-size: 1.6rem; 
    line-height: 1.5;
    padding: 1em; }

http://jsfiddle.net/wZD4n/

Upvotes: 0

Related Questions