Bug 183239 – [scroll-snap] Scroll sometimes freezes past edge when scroll-snap-type is set.

• Status: RESOLVED
• Resolution: WORKSFORME
• Component: Layout and Rendering

[jonjohnjohnson]

Could be another bug related to -> https://bugs.webkit.org/show_bug.cgi?id=183158 [[e-mail]]

Observed:
Scrolling an element that has 'overflow-x:scroll' 'scroll-snap-type: x mandatory;' gets stuck at the end of the scroll gesture when scrolling left, against the starting edge of itself, when scroll event happens above a child element that also scrolls.

Expected:
Scroll should rubberband back to having a scrollLeft of 0, regardless of event propagation from child that also scrolls.

Steps to reproduce:
1. Navigate to this url -> http://jsbin.com/gogimu/13
2. Click 'open' button and see left menu 'scroll' open.
3. Use two finger scroll gesture to 'pull' the menu left and right above the shadowed area
4. Notice how scroll logic behaves smoothly.
5. Refresh page, then click 'open' to access menu again. 
5. Now, use two finger scroll gesture while mouse is above the menu to perform same horizontal scroll actions.
6. Notice difference in scrolling horizontally when mouse is above menu.
7. Often when pulling the menu further into the screen, passed it's scroll edge, it won't snap back to the edge after the gesture.
8. If scroll-snap-type is unset, buggy behavior disappears, and scrolling in all directions behaves correctly.

[Wenson Hsieh]

I'm also able to reproduce on macOS 10.13.4/STP 50.

Thanks for the test case!

[jonjohnjohnson]

(In reply to Wenson Hsieh from comment #1)

No problemo, pushing scroll-snap to it's limits in webkit/blink with some experimentation is all. But heads up, this 'bug' might be cleared up or have some relation to when 'overscroll-behavior' [https://bugs.webkit.org/show_bug.cgi?id=176454] is implemented? That functionality in blink makes these scroll interactions quite clean. Check the test case in chrome canary 66 to see overscroll-behaviors impact.

[jonjohnjohnson]

Another scroll-snap-type test case -> http://jsbin.com/gedurer

Includes interactions with...
1. Nested scroll containers going different directions
2. Position:sticky
3. Perspectives/transforms

On desktop, scrolling sometimes freezes in the complexity of scrolling horizontally and vertically. Click the blue header to cycle different 'paging' styles.

[Martin Robinson]

I'm no longer able to reproduce this bug in stable Safari, so I think it's been fixed by another change.