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: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Scrolling (show other bugs)
Version: Safari Technology Preview
Hardware: iPhone / iPad iOS 14
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2021-07-31 20:47 PDT by Simon Weaver
Modified: 2021-08-09 10:26 PDT (History)
3 users (show)

See Also:


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 

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