NEW 283707
[css-scroll-snap] Scripted scrolling fails for elements using scroll-snap
https://bugs.webkit.org/show_bug.cgi?id=283707
Summary [css-scroll-snap] Scripted scrolling fails for elements using scroll-snap
Hiroya UGA
Reported 2024-11-26 01:39:36 PST
Safari 18.1.1 (20619.2.8.11.12) When using scroll-snap properties on a horizontally scrollable container, programmatic scrolling via JavaScript (e.g., scrollTo or scrollBy) does not behave as expected. The scroll position cannot be dynamically controlled because the scroll speed is too fast, the scroll position does not move, or the content fails to render. ## Example: https://codepen.io/hiroya_uga/pen/yyBBWZv The sample is a row of 100px content that scrolls by 10px. - When `scroll-snap` is enabled, `scrollBy` hides the content. - When `scroll-snap` is enabled, `scroll` does not work.
Attachments
rendering in safari, firefox, chrome (2.18 MB, image/png)
2024-11-26 21:03 PST, Karl Dubost
no flags
Hiroya UGA
Comment 1 2024-11-26 01:44:10 PST
## Steps to reproduce 1. Create a scroll container with `scroll-snap-type: x mandatory;` 2. Include `scroll-snap-align: start;` items 3. Scroll the scroll container with a script
Karl Dubost
Comment 2 2024-11-26 21:03:08 PST
Created attachment 473378 [details] rendering in safari, firefox, chrome Weird rendering issue after pressing scrollBy() on Safari. Everything is blue.
Radar WebKit Bug Importer
Comment 3 2024-12-03 01:40:14 PST
Note You need to log in before you can comment on or make changes to this bug.