1442212 - Media Query in rem unit doesn't trigger on resize when html has a font-size defined

Status: RESOLVED DUPLICATE of bug 1396057

(Core :: CSS Parsing and Computation, defect)

Description

[Remi]

Attachment: fx-media-queries-rem.html

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36

Steps to reproduce:

1. Adjust your browser window's width above 961px.
2. Go to https://hteumeuleu.fr/wp-content/uploads/2018/03/fx-media-queries-rem.html (or attached file).
3. Resize the browser window's width below 960px.


Actual results:

The background defined in the media query (`max-width: 60rem`) only changes below 600px.

If you reload the page at any point below 960px, the background color effectively changes.


Expected results:

The background color should have been changed below 960px when resizing the window, and not below 600px. There should be no difference between resizing and reloading the page. 

Per specification (https://www.w3.org/TR/css3-mediaqueries/#units):

> Relative units in media queries are based on the initial value, which means that units are never based on results of declarations.

This means that with a default font size of 16px, a media queries of 60rem equals 960px. So this is the correct value, it's just not applied.

This all only happens when there is a different `font-size`set on the `html` element than the browser's default font size value.

Comment 1

[Nicolas Hoffmann]

Here is another testpen: a paragraph should appear at <800px, however the breakpoint is triggered at 500px.

There is a reset on html to have 10px as base font size, so 50rem * 10px = 500px.

https://codepen.io/nico3333fr/full/xYMJrg/

Comment 2

[Julien Wajsberg [:julienw]]

I reproduce in 58 but this works as expected in my Nightly (v60, 20180227220155). Let's see if somebody from the CSS team knows more.

Comment 3

[Julien Wajsberg [:julienw]]

I bisected, looks like it's been fixed by https://github.com/servo/servo/pull/19194

Comment 4

[Julien Wajsberg [:julienw]]

Pushlog from the bisection: https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=138f68288387ca1ae709d54b3cd452ad59a87651&tochange=b7ebbb451e5a493673f89edb06307caefed0833a

I don't know how to find if we have a bugzilla bug.

Comment 5

[Julien Wajsberg [:julienw]]

Ah yes, it's bug 1396057.