Bug 228686 - scroll-snap-stop: always behaves like scroll-snap-stop: normal when using smooth scrolling
Summary: scroll-snap-stop: always behaves like scroll-snap-stop: normal when using smo...
Status: RESOLVED WORKSFORME
Alias: None
Product: WebKit
Classification: Unclassified
Component: Scrolling (show other bugs)
Version: Safari Technology Preview
Hardware: iPhone / iPad iOS 14
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-07-31 20:47 PDT by Simon Weaver
Modified: 2022-05-11 06:06 PDT (History)
4 users (show)

See Also:


Attachments
testcase (1.52 KB, text/html)
2022-05-10 04:54 PDT, Bruno Stasse
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Simon Weaver 2021-07-31 20:47:29 PDT
I have a horizontal image carousel with five images and five navigation buttons.
The slides are each 100vw in width and positioned with scroll-snapping.

I am using iOS 15 Beta 4 and I have enabled 'CSSOM View Smooth Scrolling' under Experimental WebKit Features.


/* partial css */
#gallery {

    scroll-snap-type: x mandatory;
    
    display: flex;
}

.slide {

    scroll-snap-align: center;
    scroll-snap-stop: normal;

    min-width: 100vw;   
    width: 100vw;
}

The scrolling is triggered programatically when clicking a button using:

document.getElementById('gallery').scrollTo({ left: offset, behavior: 'smooth' });   // offset is x position of n'th slide


If I click to go from slide 1 > slide 5 then that obviously passes over all the snap stops in between.

Then what happens is Safari abruptly stops on the second slide's snap point (the first it reaches).
 
The behavior is exactly what I would expect from:
scroll-snap-stop: always 

This is not supposed to happen with scroll-snap-stop: normal 
https://www.w3.org/TR/css-scroll-snap-1/#scroll-snap-stop

Demo pending.

Similar bug:
https://bugs.webkit.org/show_bug.cgi?id=145330
https://bugs.webkit.org/show_bug.cgi?id=223406
Comment 1 Martin Robinson 2021-08-09 10:26:02 PDT
Hi Simon, thanks for reporting this issue! Do you have a testcase for this bug?
Comment 2 Radar WebKit Bug Importer 2021-08-09 10:26:19 PDT
<rdar://problem/81701291>
Comment 3 Bruno Stasse 2022-05-10 04:54:09 PDT
Created attachment 459108 [details]
testcase

I don't know whether there was initially a problem or not, but there is no problem today.

I made a testcase where you can see that there is no problem with smooth scrolling over items with `scroll-snap-stop: normal` or `scroll-snap-stop: always`. It scrolls smoothly to the desired position in both cases, as intended.

This ticket should probably be marked as fixed.
Comment 4 Martin Robinson 2022-05-11 06:06:20 PDT
Thanks!