<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 - support snapping to nested elements"
href="https://bugs.webkit.org/show_bug.cgi?id=145843">145843</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>CSS Scroll Snap - support snapping to nested elements
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>528+ (Nightly build)
</td>
</tr>
<tr>
<th>Hardware</th>
<td>All
</td>
</tr>
<tr>
<th>OS</th>
<td>All
</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>WebCore Misc.
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>majidvp@chromium.org
</td>
</tr></table>
<p>
<div>
<pre>According to the current Snap Points Spec draft[1] an scrolling container may snap to snap coordinates that are defined on any of its descendant. Here is the relevant language from the spec:
"The scroll-snap-coordinate property is used to define the x and y coordinate within the element which will align with the *nearest ancestor* scroll container’s snap-destination for the respective axis."
The current Webkit implementation only snaps to snap points defined on immediate children. Lots of interesting layouts outside simple image galleries require in-between layers between scroller and the actual items to provide structure. Firefox implementation of snap points support snapping to arbitrary descendant as opposed to only immediate children.
Here is an simple repro: <a href="http://majido.github.io/snap-points/tests/element-snap-coordinates.html">http://majido.github.io/snap-points/tests/element-snap-coordinates.html</a>
Elements are indented according to their nesting level. Webkit nightly only snaps to black elements (i.e. immediate children) while Firefox snaps to all elements.</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>