725879 - Broken support for rem unit in Media Queries

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[Florens Verschelde :fvsch]

I've recently built a web page layout using the CSS3 rem unit extensively and support for this unit in Firefox (Bug 472195) is great. But it seems broken when used in CSS Media Queries.

I have a simple test here: http://fvsch.com/code/bugs/rem-mediaquery/
Even though the root font-size is set to 20px, it seems that when used in Media Queries 1rem maps to 16px. Actually it maps to the default font-size set in the preferences. If I set the default font-size (in Firefox prefs, not in CSS) to 20px, the test page works as intended. If I set it to 10px, it's even more broken. Etc.

Comment 1

[Boris Zbarsky [:bzbarsky]]

The media query spec, section 6 says:

  Relative units in media queries are based on the initial value. For example, in HTML,
  the ‘em’ unit is relative to the initial value of ‘font-size’. 

This is why every UA that you tested that supports "rem" in media queries handles it the same way.  It's the only sane way to handle it; the alternative involves having to define the behavior of this scenario:

  <style>
    @media all and (min-height: 5rem) {
      html { font-size: 1000px !important; }
    }
    html { font-size: 1px; }
  </style>

In any case, we're doing exactly what the spec says to do here.  I realize it's not as useful for what you want to do, but the other option really can't work because of examples like the above.

Comment 2

[Florens Verschelde :fvsch]

Had missed that in the spec (I had searched for "rem" but not for "em" or relative units), my bad.

Your example would work predictably when first rendering a page (unless there is some specified application order for rules inside and outside of media queries): given a base font-size of 16px, the root element’s font-size will be 1px if the viewport’s height is smaller than 80px, and 1000px if the viewport’s height is 80px or more. But then when the media query must be processed/evaluated once more (e.g. on viewport or orientation change) it does become kind of messy. I see why nobody sane would want to go there. :)

But this is going to trip web authors up, especially as we start to move away from relying on the px unit for most of our design and code decisions. Units like rem and ch might seem useful for responsive design, but they just won’t work as expected by authors.

Comment 3

[Boris Zbarsky [:bzbarsky]]

> Your example would work predictably when first rendering a page 

Media queries are not evaluated at particular points in time; they have to be reevaluated any time the thing they depend on change.  In this case, if it depended on the font size of the root element it would need to be reevaluated whenever that font size changed....  In any case, we agree that it would be a mess.  ;)

I agree that there is an education problem here.  I think that making it clear (in the spec, or tutorials, or both) that font-size relative units in media queries work the same way that they work when setting font-size on the root element would be good.

Comment 4

[mkstix6]

Has the position on this changed at all?
Just ran into this problem too (4 years later).
A bit worried that users preferences will mess up the rem media queries I have (wanted to use a :root font size of 18px).

Comment 5

[mkstix6]

Ignore me. I've realised Firefox and Chrome are following the spec and what I'm looking at is a Safari bug.
Although I would like the incorrect way in some situations I see the mathematical problems with it where people could trivially set up infinite loops.