[csswg-drafts] [css-touch-action] disable webview swipe back behavior (#6161)

liamdebeasi has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-touch-action] disable webview swipe back behavior ==
## Problem

On platforms such as iOS, web apps installed to the home screen have swipe gestures that allow users to navigate back and forth between pages. Many Single Page Apps (SPA) implement their own transitions or manage their own stack based navigation. As a result, the default swipe gesture gets in the way of these custom solutions.

When using webviews like WKWebView directly, developers can disable this swipe gesture functionality, but it is not currently possible to do the same with web apps installed to the home screen. This is not limited to iOS as I believe newer versions of Android implement certain platform navigation gestures as well.

Right now developers can use `window.history.replaceState()` to navigate without this built-in swipe gesture, but it tends to interfere with custom page transitions and navigation stacks.

The attached video shows the current problem in an SPA installed to the home screen:


https://user-images.githubusercontent.com/2721089/112997236-ede0de80-913a-11eb-885a-c0baac5029cb.mp4


In this example, the app has a JS-driven swipe to go back gesture that involves the "Back" button transforming into the "People" title. Notice that the custom swipe gesture causes the tab bar to stay fixed as well. The video shows how easy it is to accidentally trigger the platform's built-in swipe to go back gesture. You can tell that the platform's built-in swipe gesture is being triggered because the tab bar transitions, and the "Back" button does not transform into the "People" title. Additionally, the platform's swipe back gesture causes the JS-driven swipe gesture to be triggered as well, resulting in an awkward UX.

## Solution

My initial thought is to add a new option to `touch-action`. When a web app is installed to the home screen, using this feature would disable the built-in swipe gestures that are found on iOS/Android.

These swipe gestures would always be enabled in a browser environment, but could be disabled when running a web app from the home screen. The reason for this difference is some websites could potentially use this feature in malicious ways to make it harder to leave spam websites. They already do this by redirecting users several times and opening several alert dialogs in a row, so I think disabling the swipe gesture in a browser environment would make this problem even worse.

The one concern I have with using `touch-action` is the current options allow you to opt-in to particular behaviors. So `touch-action: pinch-zoom` enables multi-finger zooming of the page. Where the swipe back gesture is enabled by default on iOS, having a value that opts-out of this behavior may be confusing. Open to other suggestions as to how we can handle this though. 😄 


## Alternatives

I have seen some examples on Twitter and GitHub where developers are making use of the `touchstart` and `touchmove` events to prevent the swipe gesture from activating, but that approach seems brittle and likely to break at any time.

cc @graouts (We discussed this on the WebKit Slack a few months ago, and you asked me to cc you when I created this)

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6161 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 30 March 2021 13:59:09 UTC