Bug 203335 – Horizontal gestures easily cancellable inside "touch-action: pan-y" element (preventDefault() doesn't help)

• Status: NEW
• Component: UI Events

[Marcel Dopita]

Created attachment 381731 [details]
test case

I'm unable to reliably combine vertical scrolling (allowed via "touch-action: pan-y") with handling of custom horizontal gestures (pointer events). In Safari (on iOS 13.2 developer beta 4), some slow horizontal gestures are too easily cancellable by going up or down. Other browsers (Latest preview of Firefox or Chrome on other platforms) lock really fast to one axis and do not cancel gesture in progress when user moves in the direction of other axis.

Please see attached test file. The steps are:

1. Tap the yellow box and continue horizontal gesture to the right. 
2. At some point, change the gesture direction and go up or down.

On iPhone X, even when moving the box 20-50 pixels horizontally, gesture can still be canceled by going vertically (not always, but depending on gesture distance/velocity). When moving really slow, I can even go beyond 50 pixels.

As attempted in the example, calling preventDefault() from pointermove callbacks also doesn't stop scrolling in the y axis.

[Marcel Dopita]

Created attachment 381732 [details]
demo video

[Radar WebKit Bug Importer]

<rdar://problem/56597055>

[Marcel Dopita]

I tried replacing touch-action and pointer events with touch events only and was able to handle everything, including the described issue (prevent undesired vertical scroll using preventDefault()).