Bug 184626 - [css-scroll-snap] Scroll sometimes freezes between snap positions when nested scrolling element receives a scroll in alternate axis against nested scroll containers edge?
Summary: [css-scroll-snap] Scroll sometimes freezes between snap positions when nested...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari Technology Preview
Hardware: Macintosh macOS 10.12
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2018-04-13 21:49 PDT by jonjohnjohnson
Modified: 2018-04-16 09:40 PDT (History)
4 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description jonjohnjohnson 2018-04-13 21:49:24 PDT
I made the title of this bug as specific as I was able to deduce. :/

Scroll-snap freezing between scroll-snap positions.

Scroll-snap should always snap to a position if type if set to `mandatory`.

Steps to reproduce:

1. Visit this test case -> http://output.jsbin.com/lefekiv/5
2. Scroll horizontally and notice scroll-snapping between full window sized "pages".
3. Scroll vertically within each "page".
4. Sometimes when horizontal snapping hasn't finished, nested vertical scrollers receive a vertical scroll event and freezes horizontal snapping.

I am *pretty sure that it only freezes when the vertical scroll event is happening against an already fully scrolled edge, top or bottom.

Note, this sounds similar to another bug (https://bugs.webkit.org/show_bug.cgi?id=183239), but when I test the bug inducing behaviors for each, what causes failures in one doesn't in the other.

Here is a quick video showcasing the freezing, though not easy to tell when my trackpad commences vertical scrolling:

As an aside, from what I've seen in the iOS versions of safari, scrolling axises that aren't on the same element, can NEVER happen at the same time, which is nice, and might be a preferred ux paradigm for desktop safari as well? If you offer feedback being in favor of this note, maybe I'll bring up the topic to the csswg about making it a specified behavior for consistencies sake?
Comment 1 Radar WebKit Bug Importer 2018-04-14 00:02:43 PDT
Comment 2 Wenson Hsieh 2018-04-16 09:40:05 PDT
Thanks for the test case! I can reproduce with the following steps:

1. Scroll vertically in one of the containers, but don't "let go" of the trackpad.
2. Scroll horizontally towards the next page.

For some reason, scroll snapping doesn't kick in when we're notified that scrolling has finished without momentum, if scrolling occurs in an alternate (non-scroll-snapping) axis...