Bug 286616
| Summary: | Scroll position jumps moving slotted element within web component / custom element with scroll-snap | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | tobias |
| Component: | Scrolling | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Major | CC: | julian.hollmann, simon.fraser, tobias, webkit-bug-importer |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 18 | ||
| Hardware: | All | ||
| OS: | All | ||
| URL: | https://codepen.io/klipstein/pen/JoPwgdy | ||
tobias
When the `<slot>` node of a web component gets moved within its shadow-root during scroll and scroll-snap is enabled it leads to scroll jumps.
Here is a test-case for this scenario: https://codepen.io/klipstein/pen/JoPwgdy
The test-case is as such: within a web component there is vertical scroller with scroll-snap and when one of the cards is visible by 50% it moves the "<slot></slot>" to this card. This would be useful when implementing vertically scrollable video players, where the same video instance is moved to the current visible card.
When the scroll container gets scrolled slow it somehow jumps directly to the slotted element and when you scroll fast it leads to strange scroll jumps.
This bug can be verified in Safari 18 (Mac OS), Safari Technology Preview (Mac OS) and iOS Safari (Version 18.2.1).
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/144154846>