Bug 322849 – Transitioned CSS filter on an ancestor cancels in-progress touch scrolling on iOS

• Status: NEW
• Component: Compositing

A CSS filter applied on :active and transitioned, set on an ANCESTOR of a
scrollable element, causes iOS Safari to abandon a touch scroll that has
already begun. Most drags inside the scroller produce no scroll events at all.

Reduced test case (static HTML, no framework):
https://readkinetic.com/repro/safari-filter-scroll.html

The whole of it is two rules:

  .host        { transition: filter 150ms ease-out; }
  .host:active { filter: brightness(0.95); }

where .host is the parent of the scrolling div.

Steps to reproduce:
1. Open the URL on an iPhone running iOS 26.6.
2. Drag vertically inside the bordered box. The checkbox is ticked by default,
   so the filter rule is active.
3. Observe that most gestures scroll nothing. The page counts gestures that
   produced no scroll event.
4. Untick "filter on ancestor" and repeat the same drags.

Expected: the filter changes appearance only; scrolling is unaffected.

Actual: with the filter rule active, drags are frequently ignored. On my
iPhone 16 Pro (iOS 26.6) I needed up to 25 consecutive drags before one
scrolled. With the rule off, every drag scrolled.

Notes:
- The page around the scroller scrolls normally throughout. Only the inner
  scrollable element is affected.
- Not reproducible in Chrome on Android, or in Safari or Chrome on macOS.
- Removing either the transition or the filter avoids it.

[Simon Fraser (smfr)]

I believe this happens when we remove and re-add a UIScrollView to the view hierarchy as ancestor layers change.