filter on an ancestor cancels an in-progress touch scrollAffected: iOS Safari. Not reproducible in Chrome on Android or in desktop browsers.
The box below scrolls. Its parent — not the scroller itself — has a
filter that is applied on :active and transitioned. With that rule
active, most touch drags inside the box produce no scrolling at all.
.host { transition: filter 150ms ease-out; }
.host:active { filter: brightness(0.95); }
| Scroll events, this gesture | 0 |
|---|---|
| Gestures that scrolled at all | 0 |
| Gestures that did nothing | 0 |
Steps. Open on an iPhone. Drag inside the box with the checkbox ticked and note how many gestures do nothing. Untick it and repeat. On the reporter's iPhone 16 Pro (iOS 26.6) every drag scrolled with the filter off; with it on, up to 25 consecutive drags produced no scroll before one took.
Filed as WebKit bug 322849. Written up in Safari dropped my scroll because of a CSS fade on an ancestor, which is where this came from — a PDF reader called ReadKinetic that renders real typeset pages in the browser.