1707416 - On Window 7 Mozilla Firefox 88, "1rem" doesn't equal "16px".

Status: RESOLVED INCOMPLETE

(Core :: Layout, defect)

Description

[Antoine Louis]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:89.0) Gecko/20100101 Firefox/89.0

Steps to reproduce:

I was checking how was rendering the "lyan.tv" website we were working on.
And on all computers running on Window 7 Mozilla Firefox 88, the elements, images and text were rendering weirdly compare to the website on other computers running W10 but with the same Browser.

Actual results:

After further investigations and comparisons between our devices we noticed the the elements didn't have the same height.

Expected results:

After a lot of testing we've guessed the the "1rem" units didn't have the proper size of "16px".
We've edited our code and pushed a new version with this time all the elements sized in "px" instead of "rem". And everything was rendering as expected.

Comment 1

[BugBot [:suhaib / :marco]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[Emilio Cobos Álvarez [:emilio]]

That sounds really odd. Does it happen on a clean profile? Do you have a page that reproduces the issue?

Comment 3

[Daniel Holbert [:dholbert]]

I tested, and can't reproduce; 1rem is 16px for me.

I tested on BrowserStack using Windows 7 and Firefox 88, using this testcase on jsfiddle: https://jsfiddle.net/dholbert/n0ujefgd/ , and I got 16px.

Closing as INCOMPLETE since a month has gone by with no response, and attempts to reproduce this ourselves have failed. Antoine, if you could provide a testcase that demonstrates the issue (and confirm that it reproduces in a fresh browser profile -- see about:profiles -- that would be great and feel free to reopen at that point, assuming it's still reproducible for you.)

For reference, here's the contents from my own jsfiddle testcase (which produced 16px as expected):
HTML:

The alert() popup will tell you how big 1rem is.
<div id="inspectMe">
</div>

CSS:

#inspectMe {
  width: 1rem;
  height: 1rem;
  background: blue;
}

JS:

alert("1rem is " + window.getComputedStyle(inspectMe, "").width);