Bug 223406

Summary: scroll-snap-stop: always not respected during momentum scrolling
Product: WebKit Reporter: Raphael Schaad <raphael.schaad>
Component: ScrollingAssignee: Martin Robinson <mrobinson>
Status: RESOLVED FIXED    
Severity: Normal CC: mrobinson, simon.fraser, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
Bug Depends on:    
Bug Blocks: 218115    
Attachments:
Description Flags
Demonstrates minimum viable snap requirements: paging between colors, aligning to black lines, un-snapped vertical scroll.
none
Patch
none
Patch none

Raphael Schaad
Reported 2021-03-17 18:08:45 PDT
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.
Attachments
Demonstrates minimum viable snap requirements: paging between colors, aligning to black lines, un-snapped vertical scroll. (1.39 KB, text/html)
2021-03-17 18:08 PDT, Raphael Schaad 		no flags
Details
Patch (7.64 KB, patch)
2021-03-19 02:52 PDT, Martin Robinson 		no flags
DetailsFormatted DiffDiff
Patch (7.61 KB, patch)
2021-03-19 09:53 PDT, Martin Robinson 		no flags
DetailsFormatted DiffDiff
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.
Martin Robinson
Comment 1 2021-03-18 01:58:17 PDT
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
Comment 2 2021-03-18 07:57:06 PDT
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
Comment 3 2021-03-19 02:44:28 PDT
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
Comment 4 2021-03-19 02:52:33 PDT
Created attachment 423708 [details] Patch
Simon Fraser (smfr)
Comment 5 2021-03-19 09:25:16 PDT
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
Comment 6 2021-03-19 09:53:43 PDT
Created attachment 423739 [details] Patch
Martin Robinson
Comment 7 2021-03-19 10:03:42 PDT
(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
Comment 8 2021-03-19 10:48:14 PDT
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
Comment 9 2021-03-19 10:49:16 PDT
<rdar://problem/75626899>
Note You need to log in before you can comment on or make changes to this bug.