Bug 223406 – scroll-snap-stop: always not respected during momentum scrolling

• Component: Scrolling
• Status: RESOLVED FIXED

[Raphael Schaad]

Created attachment 423545 [details]
Demonstrates minimum viable snap requirements: paging between colors, aligning to black lines, un-snapped vertical scroll.

This is following up on bug 197744 - Implement scroll-snap-stop for scroll snapping. `scroll-snap-stop` doesn't work properly, tested in STP Release 122. Unlike in Chromium, it scrolls past `scroll-snap-stop: always` hard stops.

The attached test case is a basic HTML/CSS file that demonstrates minimum viable snap requirements: outer hard snap (paging between colors), inner soft snap (aligning to black lines), un-snapped vertical scroll.

This should likely be tracked in meta bug 218115 that tracks the remaining CSS scroll-snap web compatibility issues.

[Martin Robinson]

Thanks for making this bug report and including a test case. I just want to confirm that you are seeing this issue when scrolling with the trackpad (momentum scrolling). Have you noticed this issue when using other types of scrolling such as via the keyboard or with an attached mouse?

[Raphael Schaad]

Seeing this issue when scrolling with the trackpad, keyboard, or mouse. Screencast that demos the supplied test case with all 3 peripherals: https://www.loom.com/share/5f72b8971638480b94660c7f4a032ca2

[Martin Robinson]

Thanks for the great video! I think there are a few issues here:

1. scroll-snap-stop:mandatory is not working for momentum scrolling.
2. There is a bug which prevents momentum scrolling in the axis that doesn't have scroll snap. This is bug https://bugs.webkit.org/show_bug.cgi?id=213571.
3. Scrolling via the keyboard is not animating. I'm not sure what was causing this, but it seems to be fixed now. It is perhaps related to https://bugs.webkit.org/show_bug.cgi?id=223375. In addition, there is a similar bug for for scrolling overflow: https://bugs.webkit.org/show_bug.cgi?id=220767.

I have a fix for the first issue, which I will post shortly.

[Martin Robinson]

Created attachment 423708 [details]
Patch

[Simon Fraser (smfr)]

Comment on attachment 423708 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=423708&action=review

> LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-stop-momentum-scroll.html:91
> +        <div class="color0 colorBox"><div id="console"></div></div>
> +        <div class="color1 colorBox"></div>
> +        <div class="color2 colorBox"></div>
> +        <div class="color3 colorBox"></div>
> +        <div class="color4 colorBox"></div>
> +        <div class="color5 colorBox"></div>
> +        <div class="color0 colorBox"><div id="console"></div></div>

Two consoles?

[Martin Robinson]

Created attachment 423739 [details]
Patch

[Martin Robinson]

(In reply to Simon Fraser (smfr) from comment #5)
> Comment on attachment 423708 [details]
> Patch
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=423708&action=review
> 
> > LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-stop-momentum-scroll.html:91
> > +        <div class="color0 colorBox"><div id="console"></div></div>
> > +        <div class="color1 colorBox"></div>
> > +        <div class="color2 colorBox"></div>
> > +        <div class="color3 colorBox"></div>
> > +        <div class="color4 colorBox"></div>
> > +        <div class="color5 colorBox"></div>
> > +        <div class="color0 colorBox"><div id="console"></div></div>
> 
> Two consoles?

Oof. That is a copy-and-paste error. I'll fix that and land this. Thanks for the review!

[EWS]

Committed r274726: <https://commits.webkit.org/r274726>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 423739 [details].

[Radar WebKit Bug Importer]

<rdar://problem/75626899>