REOPENED159635
em-based media queries in <source> are relative to <html> instead of browser default font 
https://bugs.webkit.org/show_bug.cgi?id=159635
Summary em-based media queries in <source> are relative to <html> instead of browser ...
Matt Wondra
Reported 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!
Attachments
Add attachment proposed patch, testcase, etc.
Jan Widmer
Comment 1 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
Jan Widmer
Comment 2 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
Myles C. Maxfield
Comment 3 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
Jan Widmer
Comment 4 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
Myles C. Maxfield
Comment 5 2017-02-08 01:06:51 PST
Reopening.
Joe Pea
Comment 6 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.
Kyle Bavender
Comment 7 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!
Jelmer de Maat
Comment 8 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
Jelmer de Maat
Comment 9 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
Radar WebKit Bug Importer
Comment 10 2022-12-01 03:24:34 PST
<rdar://problem/102853668>
Note You need to log in before you can comment on or make changes to this bug.