<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 - CSS Scroll Snap not enforced when you move the cursor between scrollable elements"
href="https://bugs.webkit.org/show_bug.cgi?id=153480">153480</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>CSS Scroll Snap not enforced when you move the cursor between scrollable elements
</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>m.goleb+bugzilla@gmail.com
</td>
</tr></table>
<p>
<div>
<pre>Please see <a href="http://output.jsbin.com/sukerik/2/">http://output.jsbin.com/sukerik/2/</a>. The page contains multiple horizontally scrollable divs with CSS scroll snapping enabled. Use a trackpad or the Magic Mouse to scroll right on the first element and then, before the scroll finishes, quickly move the cursor down, passing a few more pictures. The effect is that some containers stop between the pictures even though CSS scroll snap should not allow them to stop at such points.
It seems to me that once the cursor moves to another scrollable area, the engine immediately stops scrolling in the previous one without taking into account the needs of CSS scroll snap.
I tested it on WebKit Nightly r195574, the latest one. Safari 9.0.3 shares this problem as well. This shouldn't be a problem on mobile when you can't "move the cursor".</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>