Bug 226195

Summary: Mobile Safari: Scrolling stops when a child is added to or removed from an overflow:auto element with a shadow root
Product: WebKit Reporter: Gray Norton <graynorton>
Component: ScrollingAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Major CC: mail, rniwa, simon.fraser, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 14   
Hardware: iPhone / iPad   
OS: iOS 14   
Bug Depends on:    
Bug Blocks: 148695    
Attachments:
Description Flags
Screen recording of bug none

Gray Norton
Reported 2021-05-24 16:10:17 PDT
Created attachment 429583 [details] Screen recording of bug 1. Using iOS 14.4.2, open https://codepen.io/graynorton/full/yLMbxXE in Safari or Chrome. 2. Flick or drag within the blue-bordered element to scroll vertically. Expected result: Scrolls smoothly, with velocity Actual result: For each flick or drag gesture, scrolls only ~10 pixels and stops Works as expected in Safari, Chrome, Firefox desktop (OS X). Works as expected in Chrome Android. In Mobile Safari, scrolling stops whenever a child element is added to or removed from the scrolling element, which has a shadow root with a single <slot> element inside it. In this repro case, the first child is removed and immediately re-added whenever the element's scrollTop changes by > 10 pixels, but the same problem occurs with any addition or removal of child elements, regardless of whether the mutation is triggered by a scroll event.
Attachments
Screen recording of bug (1.26 MB, video/mp4)
2021-05-24 16:10 PDT, Gray Norton 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2021-05-24 19:09:37 PDT
<rdar://problem/78430637>
Simon Fraser (smfr)
Comment 2 2021-05-28 15:47:22 PDT
Does this reproduce in a simple case without any shadow DOM?
Bram Kragten
Comment 3 2021-06-03 06:42:15 PDT
No, the same repo, without shadow DOM works correctly.
Gray Norton
Comment 4 2021-06-03 09:20:36 PDT
(In reply to Simon Fraser (smfr) from comment #2) > Does this reproduce in a simple case without any shadow DOM? No, unless there's some other way of triggering the issue that I'm not aware of. Here's a lightly modified version of the same example without Shadow DOM, which scrolls as expected in Mobile Safari: https://codepen.io/graynorton/full/PopRGbQ
Note You need to log in before you can comment on or make changes to this bug.