Bug 203968 - CSS Scroll Snap not working on Safari (13 or TP 95)
Summary: CSS Scroll Snap not working on Safari (13 or TP 95)
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: WebCore Misc. (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat
Depends on:
Blocks: 134283
  Show dependency treegraph
 
Reported: 2019-11-07 10:36 PST by Carlos Alberto Lopez Perez
Modified: 2019-11-14 05:55 PST (History)
2 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Carlos Alberto Lopez Perez 2019-11-07 10:36:10 PST
I have been testing several demos of CSS scroll snap like:

https://webkit.org/demos/scroll-snap/
https://snap.glitch.me/carousel.html
https://hospodarets.com/demos/scroll-snap-galleries/
https://codepen.io/tutsplus/pen/qpJYaK


And it doesn't work on Safari, neither on Safari 13, not on Safari TP 95 (tested on MacOS Catalina).

The transitions (when scrolling with the mouse or clicking on the buttons) from one element to the other doesn't happen as expected (compare with behaviour on Firefox or Chrome)
Comment 1 Wenson Hsieh 2019-11-07 10:46:34 PST
Seems to be working for me on Catalina, in Safari 13 and STP, with a trackpad on macOS in overflow scrollers and the mainframe. I’ll test using mouse wheel in a bit.

Note that we don’t support scroll snapping when using arrow keys to scroll (webkit.org/b/198566), or programmatic scrolling.
Comment 2 Wenson Hsieh 2019-11-07 10:49:48 PST
(In reply to Wenson Hsieh from comment #1)
> Seems to be working for me on Catalina, in Safari 13 and STP, with a
> trackpad on macOS in overflow scrollers and the mainframe. I’ll test using
> mouse wheel in a bit.

Just tested with an optical mouse, and it seems to be working as well.

> 
> Note that we don’t support scroll snapping when using arrow keys to scroll
> (webkit.org/b/198566), or programmatic scrolling.
Comment 3 Carlos Alberto Lopez Perez 2019-11-07 10:59:29 PST Comment hidden (obsolete)
Comment 4 Carlos Alberto Lopez Perez 2019-11-07 11:00:09 PST
Right.

I was expecting this to work when you click on the scrollbar and move it with the mouse, or when using the arrow keys from the keyboard to move between the elements.

I also was expecting it to work pro-grammatically, for example in this demo: https://snap.glitch.me/carousel.html when clicking on the buttons (the left/right arrows on the first demo).


Is this behaviour of not doing the snap scroll on the above cases from Safari intended or is a bug?
Comment 5 Wenson Hsieh 2019-11-07 11:02:27 PST
(In reply to Carlos Alberto Lopez Perez from comment #4)
> Right.
> 
> I was expecting this to work when you click on the scrollbar and move it
> with the mouse, or when using the arrow keys from the keyboard to move
> between the elements.
> 
> I also was expecting it to work pro-grammatically, for example in this demo:
> https://snap.glitch.me/carousel.html when clicking on the buttons (the
> left/right arrows on the first demo).
> 
> 
> Is this behaviour of not doing the snap scroll on the above cases from
> Safari intended or is a bug?

These behaviors are bugs, and are not intended.