<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 - px, em, rem should behave the same in media queries when page zoom is applied"
href="https://bugs.webkit.org/show_bug.cgi?id=156687">156687</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>px, em, rem should behave the same in media queries when page zoom is applied
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>WebKit Nightly Build
</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>Layout and Rendering
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>webkit@chrisrebert.com
</td>
</tr>
<tr>
<th>CC</th>
<td>simon.fraser@apple.com
</td>
</tr></table>
<p>
<div>
<pre>Steps to reproduce:
1. Open <a href="http://codepen.io/cvrebert/pen/KzRXJd">http://codepen.io/cvrebert/pen/KzRXJd</a> in Safari/WebKit.
2. Click the "Change View" button.
3. A menu appears.
4. Under "Editor Layout", click the first button on the left.
5. Click the "Change View" button again to dismiss the menu.
6. Zoom in on the page in Safari/WebKit (View->Zoom In, ⌘+)
7. Resize the output pane by dragging the separator on the left edge of the output pane.
Actual results:
As you resize the output pane, the red, green, and blue bars become translucent or opaque at different widths.
Expected results:
As you resize the output pane, the red, green, and blue bars should
all become translucent or opaque together at the same time when passing a particular width boundary point.
This is the behavior exhibited by Chrome, Firefox, and MS Edge when their page zoom features are activated on said testcase webpage.
Though non-pinch page zooming is not currently standardized AFAICT, this deviation from other browsers hurts interoperability
and offers an unfortunate reason to avoid px-based media queries. See also <a href="http://zellwk.com/blog/media-query-units/#2-user-zooms-in">http://zellwk.com/blog/media-query-units/#2-user-zooms-in</a>
Note that the 3 media queries all compute to the same width value under default, non-zoomed circumstances.</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>