touch-action: pan-y does not prevent scrolling with initial horizontal panning

• Component: Scrolling
• Status: NEW ---

[Robert Flack]

In chrome or firefox, touch-action: pan-y implies that if the user initially swipes left or right, any subsequent vertical panning should be ignored. This also is covered by the pointer-events spec: https://w3c.github.io/pointerevents/#determining-supported-direct-manipulation-behavior as follows: "Similarly, in the case of the various touch-action values of pan-*, once the user agent has determined whether to handle a gesture directly or not at the start of the gesture, a subsequent change in the direction of the same gesture SHOULD be ignored by the user agent for as long as that pointer is active. For instance, if an element has been set to touch-action: pan-y (meaning that only vertical panning is handled by the user agent), and a touch gesture starts off horizontally, no vertical panning should occur if the user changes the direction of their gesture to be vertical while their finger is still touching the screen."

However, in safari it seems that if the page is not horizontally scrollable the user can start swiping horizontally on a touch-action: pan-y element and then switch to vertical scrolling. Further, it doesn't take much of a vertical movement to initiate this vertical scroll making it extremely likely to accidentally trigger on a horizontal swipe. This makes it hard for developers to use to handle directional gestures.

To reproduce the issue, load the following test page https://output.jsbin.com/wivahef/

Start a swipe on the touch-action: pan-y box moving horizontally at first and then vertically. This should not scroll the page.

However, if the page is horizontally scrollable, e.g. https://output.jsbin.com/kosisaj/ touch-action: pan-y seems to behave as expected.

[Radar WebKit Bug Importer]

<rdar://problem/85125463>

This seems to have regressed in iOS 15 and was not caught by the tests: https://bugs.webkit.org/show_bug.cgi?id=202053