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

Description Gray Norton 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.
Comment 1 Radar WebKit Bug Importer 2021-05-24 19:09:37 PDT 
<rdar://problem/78430637>
Comment 2 Simon Fraser (smfr) 2021-05-28 15:47:22 PDT 
Does this reproduce in a simple case without any shadow DOM?
Comment 3 Bram Kragten 2021-06-03 06:42:15 PDT 
No, the same repo, without shadow DOM works correctly.
Comment 4 Gray Norton 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