On touchscreen devices, the CSS :active state pseudo class remains active while the user scrolls with touch gestures by drag and hold. This behaviour is unexpected, as the active state should be disabled if the user moves the touch point. Steps to Reproduce: 1. Open a webpage with a clickable element that has an active state defined in CSS, such as a button. 2. On a touchscreen device, touch and hold the clickable element to activate its active state. 3. Without lifting the finger, move it to scroll the page. 4. Observe that the active state of the element remains active even though the touch point has moved. Expected Result: The active state of the element should be disabled as soon as the user moves the touch point to scroll the page. Actual Result: The active state of the element remains active even though the touch point has moved to scroll the page. Environment: Device: iPhone (all variants) OS: iOS 16/ iOS 15 Browser: Safari iOS
<rdar://problem/108189541>