<html>

    <head>

      <base href="https://bugs.webkit.org/" />

    </head>

    <body><table border="1" cellspacing="0" cellpadding="8">

        <tr>

          <th>Bug ID</th>

          <td><a class="bz_bug_link 

          bz_status_NEW "

   title="NEW - em-based media queries in &lt;source&gt; are relative to &lt;html&gt; instead of browser default font"

   href="https://bugs.webkit.org/show_bug.cgi?id=159635">159635</a>

          </td>

        </tr>

        <tr>

          <th>Summary</th>

          <td>em-based media queries in &lt;source&gt; are relative to &lt;html&gt; instead of browser default font

          </td>

        </tr>

        <tr>

          <th>Classification</th>

          <td>Unclassified

          </td>

        </tr>

        <tr>

          <th>Product</th>

          <td>WebKit

          </td>

        </tr>

        <tr>

          <th>Version</th>

          <td>Safari 9

          </td>

        </tr>

        <tr>

          <th>Hardware</th>

          <td>Macintosh

          </td>

        </tr>

        <tr>

          <th>OS</th>

          <td>OS X 10.11

          </td>

        </tr>

        <tr>

          <th>Status</th>

          <td>NEW

          </td>

        </tr>

        <tr>

          <th>Severity</th>

          <td>Normal

          </td>

        </tr>

        <tr>

          <th>Priority</th>

          <td>P2

          </td>

        </tr>

        <tr>

          <th>Component</th>

          <td>HTML DOM

          </td>

        </tr>

        <tr>

          <th>Assignee</th>

          <td>webkit-unassigned&#64;lists.webkit.org

          </td>

        </tr>

        <tr>

          <th>Reporter</th>

          <td>mattwondra&#64;gmail.com

          </td>

        </tr>

        <tr>

          <th>CC</th>

          <td>cdumez&#64;apple.com

          </td>

        </tr></table>

      <p>

        <div>

        <pre>On Safari 9.1, when I use em-based media queries in &lt;source&gt;s inside a &lt;picture&gt; element, the em units are relative to the &lt;html&gt; element's font size. This is different from the CSS &#64;media rule, where em-based queries are relative to the browser's default font.

I have a reduced test case here: <a href="http://codepen.io/mattwondra/pen/jAaNvj">http://codepen.io/mattwondra/pen/jAaNvj</a>

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 &lt;html&gt; element has been give a font-size of 12px (50em * 12px = 600).

&lt;style&gt;

  html { font-size: 12px; }

&lt;/style&gt;

&lt;picture&gt;

  &lt;source srcset=&quot;large.jpg&quot; media=&quot;(min-width: 50em)&quot; /&gt;

  &lt;img src=&quot;small.jpg&quot; alt=&quot;&quot; /&gt;

&lt;/picture&gt;

Is this expected behavior? Thanks for your time!</pre>

        </div>

      </p>

      <hr>

      <span>You are receiving this mail because:</span>

      <ul>

          <li>You are the assignee for the bug.</li>

      </ul>

    </body>

</html>