Using REM in Google Chrome is currently broken (in some situations)

Recently me and a few fellow web developers have come across a some strange behaviour with a few websites. The issue is that the scaling on a website is completely blown out. For example what used to be 2 pixels of margin is now 12 pixels.

Now this issue seemed to only happen on some users machines, and we narrowed it down to a sporadic group of Google Chrome users. We never had any issues until recently, and as this was now affecting a few websites all at once we then figured that it must have been a Google Chrome update which caused this issue.

We managed to track down what was going on.

Using REM, we set the html root element to 1px font size, this is kind of like a multiplier of scaling. we do this so we can scale easily, and 23 REM units would compute to 23 pixels.

The issue was Google Chrome introduced a minimum font size, only in some Google Chrome installations the minimum font size is set to 6 pixels. meaning everything is at least 6 times bigger than the base line.

Here’s the link to others having the issue
https://bugs.chromium.org/p/chromium/issues/detail?id=949471 

Solution 1: Per website work around

To work around this issue, we can scale up the html root font size by 10 times, so instead of 1 pixel it’ll be 10, overcoming the minimum font size. This will make all rem units 10 times bigger in value, so we must divide all rem units by 10 to counteract this. The benefit with this solution is that people with a minimum font size set in their browser already will benefit from this work around. Below are some before and after examples.

The ‘before’ code, which is affected by the Google Chrome issue:

html
{
  font-size: 1px;
}

p
{
 font-size: 12rem;
}

The ‘after’ code, which works around the minimum font size:

html
{
 font-size: 10px;
}

p
{
  font-size: 1.2rem;
}

Now, it’s a bit annoying to have to divide all of your existing rem units by 10, so I’d recommend instead to use a CSS pre-processor function.

If you’re using Sass this would look like the following:

$remScale: 10;
@function scale-rem-value($nonScaledRemValue)
{
   @return #{$nonScaledRemValue / $remScale}rem;
}

html
{
 font-size: #{$remScale}px;
}

p
{
 font-size: scale-rem-value(12);
}

The above allows us to use the original rem font size of 12, so there is no work needed from the developer to figure out the correct value.

Solution 2: Wait for Google Chrome to fix this

If you have multiple websites already using rem units where the root html font size is set to 1 to 6 pixels, then your best bet may be to wait until Google Chrome fixes this issue.

However even with this issue fixed the people with a minimum font size set in their browser may continue to experience this problem.

Solution 3: Stop using rem units

If you’ve already got a good workflow, and you want to scale the website nicely between breakpoints (rather than having a sudden jump between different break points), then I would recommend against this.

However if your website doesn’t necessarily benefit too much from using rem units then you could simply stop using it.

Published by Matt van der Haas

Matthew van der Haas is a lively, motivated, professional yet sarcastic web developer who loves nothing better than exploring new technology. Having not being used to writing in the third person, Matthew tells a story of how he's had over 10 years of professional web experience, and experience in front of a computer since he opened his eyes. At a small age Matthew was described as knee-cam, due to being interested in taking video when he was as tall as the height of peoples knees. Matthew also enjoys the hardware side of things, enjoys good old fashioned tidy soldering and wiring job, as well as playing with GPIOs on the Raspberry PI

Join the Conversation

1 Comment

  1. Thank you for confirming that I am not going crazy. 😉

    I spent several hours trying to track this down. I too was using 1rem = 1px to make the math easy. My rendering suddenly stopped working on (Mac) Chrome but still worked on FF. I tried resetting the browser, reinstalling Chrome, and finally found this page. I’m switching back to px because I don’t want to wait until Google fixes this problem. It’s been more than five weeks since this bug was first reported with no apparent understanding of the problem or any fixes. The funny thing is that when I first started my project, I looked to see how many people used 1rem = 1px and there were enough folks doing it that I decided to test it. The tests seemed ok so that’s what I did. That seems like a bad decision now.

    I did notice that my fonts were ok but my SVGs were scaling funny and vw and vh seemed off. Margins were effected too.

    So I just changed all my rem back to px and all is well again. I only made 89 changes. Also, I use JSS with Material UI so I had to touch a lot of files. But I think that this is the right solution. For those using Material UI, don’t forget to remove the htmlFontSize setting in your theme otherwise MUI will produce very large fonts.

    Thanks again for restoring my sanity.

Leave a comment

Your email address will not be published. Required fields are marked *