How to stop Chrome using a large font size after refreshing

I was having a torrid time trying to work out why sometimes my Genesis site had a much bigger font that it should have done. It only occurred in Chrome, and even more bizarrely, it was often OK the first time you viewed a a page, but only occurred when you refreshed it!

It turns out to be a chrome bug, and the work around is very simple, as described in this stackoverflow question. It’s caused because Genesis child themes tend to use the rem unit of measurements on the body tag. The rem unit is supposed to stop font-sizes compounding and getting out of control, but for some reason Chrome trips over when there’s an rem unit on the body tag. The good news is that you don’t need a rem unit on the body tag, because ems are only a problem when you have lots of them. Having one em unit is fine.

So if you’re affected by this bug, just look for the body tag in your CSS file, and change the font-size unit from rem to em – like this:

From this:

body {
	color: #666;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: 300;
	line-height: 1.625;
}

To this:

body {
	color: #666;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-size: 1.6em;
	font-weight: 300;
	line-height: 1.625;
}

Comments

  1. thanks, great tip!

  2. Thanks a lot for share, this works fine!

  3. I’ve seen/had this problem across a few sites but never thought to actually search for the solution.

    The moment I do the first site I find it yours and fortunately the font-size switch is oh-so-simple.

    Sorted! Thanks. 🙂

  4. I ran into this problem too. I don’t think it’s because of using rem vs. em. I think it’s because the html element has a font size of 62.5% in order to make everything ten-based. This must be the case with the code you’ve used as an example because 16px would be 1rem, not 1.6 unless the html font size is 62.5%. On my sites, I went back and changed the font size for the html to 100% and adjusted all the other font sizes by using a Sass mixin to calculate the rem size. This stopped the behavior.

  5. It might certainly be a better idea than relying
    on a taxi if you are travelling with bulky luggage.
    Enterprise also informed us that they will pick up passengers after the cruise if
    they want to rent a car to spend time visiting around Manhattan before their flight home.
    Coach timetables are available online prior to the ski season commencing and tickets can be purchased from the coach hire desk.

Speak Your Mind

*