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.

  6. Điều này phụ thuộc vào chính sách
    của từng khách sạn.

  7. Công việc của chúng tôi chính là hỗ trợ khách hàng.

  8. There’s definately a lot to learn about this subject.
    I love all the points you have made.

  9. Nội dung: Kagome là một nữ sinh trung học hiện đại.

  10. Hi there mates, its wonderful post on the topic
    of educationand entirely explained, keep it up all
    the time.

  11. It’s truly very difficult in this full of activity life to
    listen news on Television, thus I only use web for that reason, and obtain the most up-to-date news.

  12. I see you don’t monetize wp-code.com, don’t waste your traffic,
    you can earn additional bucks every month with new monetization method.
    This is the best adsense alternative for any type of website (they approve all websites), for more details simply search in gooogle: murgrabia’s tools

  13. Good response in return of this query with real arguments and
    telling the whole thing regarding that.

  14. https://social.zapus.com.br/arlimere alanranai victoria a30b5ac58e

  15. https://www.kingdomportal.com/ehigcombea alanranai ginifer a30b5ac58e

Speak Your Mind

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.