[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]

https://bugs.webkit.org/show_bug.cgi?id=191816

            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)
           Product: WebKit
           Version: Safari Technology Preview
          Hardware: Macintosh
                OS: Unspecified
            Status: NEW
          Severity: Critical
          Priority: P2
         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.

Expectations:
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.

Relevant texts
https://drafts.csswg.org/css-scroll-snap-1/
https://drafts.csswg.org/css-overscroll-behavior-1/

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20181117/e7e658f5/attachment.html>