Rems rendering differently between Chrome and Firefox

Question

I've noticed a slight issue using rems when it comes to comparing how they render in Chrome and Firefox.

Using the following CSS:

html {
  font-size: 62.5%;
}

.rem-test {
  width: 50%;
  height: 20rem;
  background: red;
}

The results are slightly different when rendered, Firefox shows the box shorter than it looks in Chrome:

Is there something I can do to stop this happening?

Here's a pen: http://codepen.io/abbasinho/pen/WbJWNq

Plotter

Have you tried with normalize css? It normalizes the css rendering between browsers and might be a fix to your problem. – Trici

They look identical for me between the two browsers, I am using a mac. – Disbud

Same here - perhaps your Firefox has a different font size setting than the default. – Urbano

FYI, if you have scaled the DPI setting, it might be the problem. Please see this issue – Sasser

Answer 1

That happens most certainly because your browsers have different font-size settings, you can easily check it with this fork of your codepen.

alert(document.querySelector('.rem-test').scrollHeight);

If the alerted values are different in chrome and firefox you should definitely check your font-size settings.

Dormancy

Answer 2

In Chrome you can look at chrome://settings/appearance and verify the property "Font size", the recommended value is "Medium".

Personally, i had the value "Large" and css attributes like margin, padding, line-height, font-size looked quite different. All was solved setting "Font-Size" to "Medium"

Raila

Answer 3

Had the exact same "issue". In my case it had to do with the Windows 10 enlarged font and item size.

Firefox takes this into account en shows everything 1.25 times enlarged when set to 125%. While chrome does not.

So 14px in Firefox becomes: 17.5px on the monitor and in chrome it stays at 14px.

Titanothere

Answer 4

Since rem is computed using the font size of your html (that is the font size of body is 5px then 20rem will be 100px) you need to have uniform font sizes across browsers.

Try adding modifying the font size in code pen.

Add-

body, html {
    font-size:15px;
} 

Everything should work similarly now.

Trici

The root element is html, not body. That's why the OP set it on html. – Urbano

I've got both html and body as the css selectors – Trici

That was a typo on my part. But the solution is correct. – Trici

Like I said, the root element is html, not body, so setting font size on body isn't going to have any effect on rem calculations. – Urbano

Answer 5

The "root" of your issue is that:

1. you never set absolute font size anywhere and
2. you are mixing relative length values from different areas.

font-size: 62.5%; is a RELATIVE length (font height, indirectly affecting text width) to the same property of the parent container. In absence of parent container, some compiled-in default will substitute. (See @seimen's answer above.)

width: 50%; is a relative length (container width) to the same property of the parent container, which is not expressed in rem's or percentage of font height, thus not obliged to fit any specific amount of text or your expectations.

Helpful links:

1. mdn:Absolute length units
2. mdn:Relative length units
3. CSS box model https://web.dev/learn/css/box-model

Carpophagous

The width being relative isn’t going to affect anything the question is asking about. – Kass

It will be when contents of the container start to overflow due to different base length. – Carpophagous