[Webkit-unassigned] [Bug 191816] New: [css-scroll-snap] scroll-snap-align not honored (creates no snap positions) on immediate child of snapport when child also scrolls (in either direction)
bugzilla-daemon at webkit.org
bugzilla-daemon at webkit.org
Sat Nov 17 14:56:17 PST 2018
Bug ID: 191816
Summary: [css-scroll-snap] scroll-snap-align not honored
(creates no snap positions) on immediate child of
snapport when child also scrolls (in either direction)
Version: Safari Technology Preview
Component: Layout and Rendering
Assignee: webkit-unassigned at lists.webkit.org
Reporter: hi at jonjohnjohnson.com
CC: bfulgham at webkit.org, simon.fraser at apple.com,
zalan at apple.com
cc wenson_hsieh at apple.com
Testcase -> https://jsfiddle.net/jfmL13n6/
In the testcase, there is a grid of 4 scrollers. Each scroller scrolls horizontally, and *should have html/css that is spec compliant for snapping between two inner snapped positions. You can witness each scroll horizontally when using at least a trackpad, but only scrollers on the bottom half of the screen exhibit snapping. The bottom scrollers use an extra element between the snapport and the inner scrollers to declare the scroll-snap-align property. This is a remedy for the current bug, but *should not be needed. In the upper scrollers, the scroll-snap-align property is declared on the inner scrolling elements and no snapping is exhibited.
There is also a tangential issue with scroll-snap breaking scroll chaining from inner scrolling element that scroll in the same axis. This can be seen in the right side scrollers specifically, where all scrollers are horizontal.
Steps to reproduce:
1. Go to test case -> https://jsfiddle.net/jfmL13n6/
2. Scroll element in the lower left horizontal and notice snapping behaves as expected.
3. Scroll element in the upper left horizontal and notice no snapping.
4. Notice inner scrollers of upper and lower left can be scrolled vertically. If `overflow-y:scroll` was removed from the inner scrollers, the upper left would begin to snap correctly.
Tangiential issue steps:
5. Scroll the upper right scroller horizontally, through the inner scrollers so that the scroll boundaries are reached and "scroll chaining" behavior allows for movement of what should be the outer snapport.
6. Scroll the lower right scroller horizontally, it doesn't allow for "scroll chaining" because the inner scroller is in the same axis as the outer snapport.
Tip. Scroll with your pointer above the red borders to ensure you are scrolling the outer snapports. Scroll on the striped areas when ensuring correct scroll chaining.
1. Scrollers on the top half of the screen should snap just like the scrollers on the bottom half.
2. Scroll chaining shouldn't be broken between same axis scrolling of snap and non-snap scrollers.
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
More information about the webkit-unassigned