Bug 283707

Summary: [css-scroll-snap] Scripted scrolling fails for elements using scroll-snap
Product: WebKit Reporter: Hiroya UGA <hiroya.uga>
Component: ScrollingAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: karlcow, nmouchtaris, simon.fraser, webkit-bug-importer
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari 18   
Hardware: Mac (Apple Silicon)   
OS: macOS 15   
See Also: https://bugs.webkit.org/show_bug.cgi?id=245722
https://bugs.webkit.org/show_bug.cgi?id=160622
Attachments:
Description Flags
rendering in safari, firefox, chrome none

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
Details
View All Add attachment proposed patch, testcase, etc.
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
<rdar://problem/140842238>
Note You need to log in before you can comment on or make changes to this bug.