Bug 159635

Summary: em-based media queries in <source> are relative to <html> instead of browser default font
Product: WebKit Reporter: Matt Wondra <mattwondra>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: REOPENED ---    
Severity: Normal CC: cdumez, dino, jan.widmer86, joe, kaelig, kyle.bavender, mmaxfield, nicolas, post, webkit-bug-importer, yoav, zalan
Priority: P2 Keywords: InRadar
Version: Safari 9   
Hardware: Mac   
OS: OS X 10.11   

Description Matt Wondra 2016-07-11 11:57:56 PDT
On Safari 9.1, when I use em-based media queries in <source>s inside a <picture> element, the em units are relative to the <html> element's font size. This is different from the CSS @media rule, where em-based queries are relative to the browser's default font.

I have a reduced test case here: http://codepen.io/mattwondra/pen/jAaNvj

Given the following code and standard 16px browser default font size, I expect the image to switch when I cross 800px browser width (50em * 16px = 800). Instead, it switches when I cross 600px because the <html> element has been give a font-size of 12px (50em * 12px = 600).

<style>
  html { font-size: 12px; }
</style>

<picture>
  <source srcset="large.jpg" media="(min-width: 50em)" />
  <img src="small.jpg" alt="" />
</picture>

Is this expected behavior? Thanks for your time!
Comment 1 Jan Widmer 2017-02-07 01:02:38 PST
I am experiencing the same behaviour on Safari 10. A small showcase can be seen here:
http://codepen.io/janwidmer/pen/XpBYWM
Comment 2 Jan Widmer 2017-02-07 01:03:20 PST
I am experiencing the same behaviour on Safari 10. A small showcase can be seen here:
http://codepen.io/janwidmer/pen/XpBYWM
Comment 3 Myles C. Maxfield 2017-02-07 14:10:58 PST
The spec says[1] "Other units must be interpreted the same as in Media Queries." The Media Queries spec says[2] "Relative units in media queries are based on the initial value, which means that units are never based on results of declarations. For example, in HTML, the ‘em’ unit is relative to the initial value of ‘font-size’."

Therefore, we are following the spec.

[1] http://w3c.github.io/html/semantics-embedded-content.html#element-attrdef-img-srcset
[2] https://www.w3.org/TR/css3-mediaqueries/#units
Comment 4 Jan Widmer 2017-02-08 00:18:52 PST
Hi Myles C. Maxfield,

I Agree with you, but there is a different behaviour between a normal Media Query with em and the media query used in a <source> tag within the picture element. Check out my Demo: http://codepen.io/janwidmer/pen/XpBYWM

There is a small red box (Viewport Indicator) on the bottom right corner which shows the current viewport based on an standard "em media query". The displayed image swwitches at the same time as the "Viewport Indicator".

As soon as you uncomment the font-size definition on the html tag, the image does NOT switch at the same time as the Viewport Indicator anymore, because the media Query within the source media attribute seems to get affected by the font-size: 62.5%, but the normal Media query doesen't.

Shouldn't they behave the same?

Best Regards
Jan
Comment 5 Myles C. Maxfield 2017-02-08 01:06:51 PST
Reopening.
Comment 6 Joe Pea 2018-05-15 12:26:24 PDT
Besides the discrepancy Jan pointed out, maybe this is actually a question of what the desired behavior is.

It would seem that for consistency, media query em values should be relative to the root font-size if it exists, otherwise not, just like `em` or `rem` values anywhere else. This would make the development experience consistent and easy to reason about.

It would also give us the power to choose: we want media query em/rem values to be relative to the browser's initial value (and therefore the browser user's specified font size)? Then we can simply not place font-size declaration on `html`. We want to have our own base value, we can put font-size on `html`. This flexibility would be ideal.
Comment 7 Kyle Bavender 2018-11-16 07:06:17 PST
As a result of Webkit's treatment of em units in media queries, some prominent teachers in the web community are recommending (https://adamwathan.me/dont-use-em-for-media-queries/) the use of px units to guarantee consistency in browser rendering. The downside of this is that user text size preferences are disregarded.

Thank you for your consideration and time!
Comment 8 Jelmer de Maat 2021-11-01 06:43:11 PDT
We also experience this bug.

Tested on: iOS 11, 14 and 15. This is still an ongoing issue in all of these versions.

See a demonstration of this issue here (use an iPad): 

https://cdpn.io/jelmerdemaat/debug/qBXPLyv/dGrXWjopoLmM

The spec mentioned earlier ("Relative units in media queries are based on the initial value, which means that units are never based on results of declarations") is not followed. 

When applying a custom font-size to the html element, the outcome of the media query inside <source> elements changes. This is not expected behaviour. It seems like the computed screen width is incorrect.

Other browsers (Chrome, Firefox, Edge) correctly adhere to the font-size defined in the browser, ignoring   any declarations.

Best regards,
Jelmer
Comment 9 Jelmer de Maat 2022-10-18 04:15:23 PDT
My previous CodePen link is now outdated. This is the correct url: https://codepen.io/jelmerdemaat/pen/qBXPLyv

Would love to get some updates about this issue as it has been negatively impacting all of our websites (100+) for quite some years now.

Thanks!

Best regards,
Jelmer
Comment 10 Radar WebKit Bug Importer 2022-12-01 03:24:34 PST
<rdar://problem/102853668>