<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 - Scroll Snap - Viewport jumps to top while another element is transitioning"
href="https://bugs.webkit.org/show_bug.cgi?id=150012">150012</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Scroll Snap - Viewport jumps to top while another element is transitioning
</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>Mac 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>CSS
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>bbratvanov@gmail.com
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=262853" name="attach_262853" title="Illustrating the scroll-snap bug. Hover on the white bar, then scroll down.">attachment 262853</a> <a href="attachment.cgi?id=262853&action=edit" title="Illustrating the scroll-snap bug. Hover on the white bar, then scroll down.">[details]</a></span>
Illustrating the scroll-snap bug. Hover on the white bar, then scroll down.
If an element is in the middle of a CSS transition while scrolling and the element's transition duration is longer than the time it takes to scroll and reach the snap point, the viewport will abruptly jump to the very top.
Width, height and other complex transitions manage to trigger the bug every time, but it doesn't seem to happen on simple transitions such as colour changes.
The bug can be replicated in stable Safari 9.0 as well as the latest nightly (r190840 - 601.1.56).
Attached is a test case reduction. It's also available here: <a href="https://jsbin.com/qoqiwisuqu">https://jsbin.com/qoqiwisuqu</a>
To replicate the bug, just hover on the white bar, wait for the transition of the green span (expanding from 20% width to 100% width) and then scroll down while the span is transitioning back to its initial state.</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>