scroll-snap-stop: always behaves like scroll-snap-stop: normal when using smooth scrolling

• Component: Scrolling
• Status: RESOLVED WORKSFORME

[Simon Weaver]

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

[Martin Robinson]

Hi Simon, thanks for reporting this issue! Do you have a testcase for this bug?

[Radar WebKit Bug Importer]

<rdar://problem/81701291>

[Bruno Stasse]

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.

[Martin Robinson]

Thanks!