[pointerevents] touch-action and scrolling directional lock (#303)

graouts has just created a new issue for https://github.com/w3c/pointerevents:

== touch-action and scrolling directional lock ==
I’m looking into an issue reported against Safari in iOS 13 related to Pointer Events. I've created a [test case](https://gist.github.com/graouts/e7390caa34f08549f95a0ae8b3d10a93) that reduces the issue to a simple usage scenario where a page is designed to only ever scroll vertically but contains an interactive area where the user may scroll horizontally to go through various pages (think an image gallery). The interactive container can be scrolled by listening to pointer events and applying a CSS `transform` to reflect the pan gesture. That interactive container also has `touch-action: pan-y`.

In Safari on iOS 13, since the page scrolls vertically, the interactive area will get a `pointercancel` event during a horizontal panning gesture unless the user is careful not to stray from a very straight horizontal panning gesture.

However, in Chrome using the Pixel 2 XL in the Developer Tools, if the user starts a panning gesture that is predominantly horizontal, it seems to lock the gesture recognition to the horizontal direction and any change of direction while in flight will *not* trigger the page to scroll horizontally.

Additionally, in the same Chrome Pixel 2 XL setup, removing the `touch-action: pan-y` property from the interactive container will trigger a `pointercancel` event even when panning  predominantly in the horizontal direction. This doesn't happen in Safari on iOS 13 since the page *cannot* scroll horizontally.

This test shows some interoperability issues and I'd like to understand if these are due to bugs in Safari and/or Chrome, or because of some lacking specifications.

Specifically, I have the following questions:

1. Does Chrome apply a directional lock of sorts for scrolling such that starting panning in a predominantly horizontal direction prevents *any* scrolling in the vertical direction? Cc @NavidZ and @RByers from Google who may know more about this Chrome behavior.

1. If there is such a directional lock, is there a specification that defines this behavior? Under what conditions does that happen? From anecdotal testing, it would appear that, in Chrome, this is tied to the presence of a unidirectional panning restriction using the `touch-action` property.

1. If there *isn't* a specification defining this behavior, should there be additional behavior to let page authors enable such directional locks? (As an aside, iOS offers an API on `UIScrollView` has the [`directionalLockEnabled`](https://developer.apple.com/documentation/uikit/uiscrollview/1619390-directionallockenabled?language=objc) property that allows for just that.)

Hopefully all of the Chrome behaviors are already specified, and in this case I'd appreciate some pointers. Otherwise, I think we need to propose some ways to make such content interoperable.

Please view or discuss this issue at https://github.com/w3c/pointerevents/issues/303 using your GitHub account

Received on Friday, 30 August 2019 13:20:18 UTC