Bug 228686

Summary: scroll-snap-stop: always behaves like scroll-snap-stop: normal when using smooth scrolling
Product: WebKit Reporter: Simon Weaver <simon>
Component: ScrollingAssignee: Nobody <webkit-unassigned>
Severity: Normal CC: augus.dupin, mrobinson, simon.fraser, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: iPhone / iPad   
OS: iOS 14   
Description Flags
testcase none

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 

Demo pending.

Similar bug:
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
Comment 3 Bruno Stasse 2022-05-10 04:54:09 PDT
Created attachment 459108 [details]

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