<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 - When using 100vw and zoom, the vw doesn't get updated to show the zoom level"
href="https://bugs.webkit.org/show_bug.cgi?id=167349">167349</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>When using 100vw and zoom, the vw doesn't get updated to show the zoom level
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>Safari 10
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Macintosh
</td>
</tr>
<tr>
<th>OS</th>
<td>macOS 10.12
</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>aaronhickman311@gmail.com
</td>
</tr>
<tr>
<th>CC</th>
<td>bfulgham@webkit.org, simon.fraser@apple.com, zalan@apple.com
</td>
</tr></table>
<p>
<div>
<pre>When using viewport units, specifically 100vw in this scenario, it will not take into consideration any zoom level. For example, I have a <div> that I want to span the entire width of the page, so I give it a style of width=100vw. If I zoom out (View -> Zoom Out) it no longer takes up the entire width.
I have a Stack Overflow issue created here: <a href="http://stackoverflow.com/questions/41817411/safari-100vw-layout-issue-when-zoomed-help-me-understand">http://stackoverflow.com/questions/41817411/safari-100vw-layout-issue-when-zoomed-help-me-understand</a>
And a jsFiddle here: <a href="https://jsfiddle.net/4vax8Lga/">https://jsfiddle.net/4vax8Lga/</a>
I would expect that 100vw should take up the entire width of the screen, even when zoomed out.</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>