Bug 203968
| Summary: | CSS Scroll Snap not working on Safari (13 or TP 95) | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Carlos Alberto Lopez Perez <clopez> |
| Component: | WebCore Misc. | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED DUPLICATE | ||
| Severity: | Normal | CC: | mrobinson, simon.fraser, wenson_hsieh |
| Priority: | P2 | Keywords: | BrowserCompat |
| Version: | Safari Technology Preview | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
| See Also: | https://bugs.webkit.org/show_bug.cgi?id=203684 | ||
| Bug Depends on: | |||
| Bug Blocks: | 134283 | ||
Carlos Alberto Lopez Perez
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)
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Wenson Hsieh
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.
Wenson Hsieh
(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.
Carlos Alberto Lopez Perez
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).
I
Carlos Alberto Lopez Perez
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?
Wenson Hsieh
(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.
Martin Robinson
This is working now on trunk and in the Safari Technology Preview 120. There is one final issue of this nature which is that snapping still doesn't happen when dragging the scrollbar (https://bugs.webkit.org/show_bug.cgi?id=146696). I'm going to close this bug in favor of that one though.
*** This bug has been marked as a duplicate of bug 146696 ***