Rems rendering differently between Chrome and Firefox

css, firefox, google-chrome, html

Solution

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.

Problem

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

Original source