[Webkit-unassigned] [Bug 159635] New: em-based media queries in <source> are relative to <html> instead of browser default font

Mon Jul 11 11:57:56 PDT 2016

https://bugs.webkit.org/show_bug.cgi?id=159635

            Bug ID: 159635
           Summary: em-based media queries in <source> are relative to
                    <html> instead of browser default font
    Classification: Unclassified
           Product: WebKit
           Version: Safari 9
          Hardware: Macintosh
                OS: OS X 10.11
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: HTML DOM
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: mattwondra at gmail.com
                CC: cdumez at apple.com

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!

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.webkit.org/pipermail/webkit-unassigned/attachments/20160711/02b2c5ce/attachment.html>