Res different from Chrome and Firefox

Question

I noticed a little problem using rems when it comes to comparing how they appear in Chrome and Firefox.

Using the following CSS:

html { font-size: 62.5%; } .rem-test { width: 50%; height: 20rem; background: red; } 

When rendering, the results are slightly different, Firefox shows the window shorter than it looks in Chrome:

Is there something I can do to stop this?

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

Answer 1

This, of course, is due to the fact that your browsers have different font size settings, you can easily check this using this fork of your code.

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

If the warning values ​​differ in Chrome and Firefox, be sure to check the font size settings.

Answer 2

In Chrome, you can look in chrome: // settings / Appearance and check the "Font Size" property, the recommended value is "Medium".

Personally, I had the "Large" value and the css attributes like margin, padding, line-height, font-size looked completely different. Everything was decided by setting "Font-Size" to "Medium"

Answer 3

There was the same "question". In my case, this is due to the font extension and size of Windows 10.

Firefox takes this into account, showing that everything is 1.25 times magnified when set to 125%. While chrome does not.

So, 14px in Firefox becomes: 17.5px on the monitor, but in Chrome it remains at 14px.

Answer 4

Since rem is calculated using the font size of your html (body font size is 5px, then 20rem will be 100px), you need to have the same font sizes in browsers.

Try adding the font size to the code handle.

Add -

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

Now everything should work similarly.