Quick update: I requested a feature for the Web App Manifest to disable built-in navigation gestures: https://github.com/w3c/manifest/issues/1041

(Previously I had proposed this as a CSS addition with touch-action, but I got some feedback that made me think it was better for this feature to exist in the Web App Manifest)

Hello everyone who uses ionic vue, you can use my directive: https://github.com/Sitronik/v-disable-swipe-back

Hi everyone,

After discussing with the WebKit team, I created a proposal for a way to disable the swipe back gesture using touch-action in CSS: https://github.com/w3c/csswg-drafts/issues/6161

Any feedback on this proposal is appreciated!

Since there are a bunch of new folks in this thread now. If you want a real fix, I suggest voting for this W3C feature request that Liam submitted: https://github.com/w3c/csswg-drafts/issues/6161

FWIW, I have not had a problem with Deep Linking using my Router-based approach to prevent URL history changes.

i have a same problem, but change code at xcode like this. and disable swipe… webview.allowsBackForwardNavigationGestures = false

because as a user of ios, i didn’t use swipe at all. so, swipe make user complicated .

Hi everyone,

I got a few questions about this issue this week and wanted to post a quick summary here:

What is the issue?

When running an Ionic app in Safari or as a PWA on iOS the platform’s swipe to go back gesture (STGB) is running at the same time as Ionic’s swipe to go back gesture (STGB), leading to unexpected flickering/rendering on the page.

Why is this happening?

Safari/WebKit provides its own built in STGB that conflicts with Ionic Framework’s STGB as they get triggered via the same touch interaction.

For developers using WKWebView, there is an API to disable the built in STGB that WebKit provides, but no such API exists for developers using Safari or WebKit in a PWA.

Is this a bug in Ionic Framework?

No. This is not a bug in WebKit either. Both functionalities are triggering when they were designed to be triggered. The problem is that they conflict and interfere with the functionality of Ionic Framework’s STGB.

Is there a solution?

The long term solution is for browser vendors to expose an API that allow web developers to control this behavior. I created a proposal for the W3C Pointer Events group: https://github.com/w3c/pointerevents/issues/358

There is no great short term solution. If this is a blocker for your app, I recommend disabling Ionic Framework’s STGB in the application config using the swipeBackEnabled functionality. While this will not disable Safari’s built in STGB, it will at least prevent the two gestures from interfering.

Ionic Angular config: https://ionicframework.com/docs/angular/config#config-options Ionic React config: https://ionicframework.com/docs/react/config#config-options Ionic Vue config: https://ionicframework.com/docs/vue/config#config-options

@liamdebeasi Awesome! I’ll check it out. Thanks for continuing to pursue this!

@MarkChrisLevy The issue here is we want neither. The fact that both occur is just bad icing on a terrible cake of confusion 😃

That’s why such a complex workaround is currently necessary.

@lincolnthree regarding swipe gesture in safari - as you mentioned setting swipeGesture to false is not sufficient, but if you disable animations (set animated = false in ion-nav or ion-router-outlet) it will work as expected: safari native back gesture will work properly. Also you can disable swipeGesture in menu. In my case I check what platform is running the app and either enable/disable animations and swipe gesture.

Here are two recordings that show the basic issue in slightly different scenarios (same basic issue). Let me know if you have any issues accessing the Google Photos/Drive link. It should be public:

Thanks! This is really helpful.

I’m glad to hear this is being discussed. It obviously can’t come soon enough 😃 This is one rare scenario when Safari was easier to tame than Chrome is. Have you had any discussions with the Chrome team about this? I’d be interested to hear their thoughts.

We have only had talks with the WebKit team. Once we put up the proposal I imagine we could ask some Chromium folks to take a look.

@liamdebeasi Just a quick heads up on the tags for this issue. Not sure “needs reproduction” is correct as the videos display the issue using a sample app. Not a big deal just don’t want this to get lost in the mix. More later, things got busy this week.

Yeah if you wouldn’t mind sending a screen recording, that would be great. I don’t have a physical Android device running Android 10 at the moment.

Here are two recordings that show the basic issue in slightly different scenarios (same basic issue). Let me know if you have any issues accessing the Google Photos/Drive link. It should be public:

https://photos.google.com/share/AF1QipOV5cR5_RV1hQfOsrbFEf5vMuyvDf6f4xoUg7GiucBRqDu7Wt1CX3GkmRf2QVWl3w/photo/AF1QipNwOlDsdVJ6uAr4m0ItctLsFlAOeIUUjh50Rws?key=WTZNbDI2aUZRWk9IN1pMRnVCUHRMWmdBU3Jpd3lB

If you notice, this PWA is set to “fullscreen” in metadata.json, however, that’s not necessary to reproduce the issue as this also occurs on the web, in “native” Chrome.

On that note, we’ve been discussing this more with the WebKit team and they suggested that this kind of gesture control would be good as a standard, as it can affect more than just iOS devices. We are currently looking at proposing an extension of touch-action since that seems the closest in terms of semantics.

I’m glad to hear this is being discussed. It obviously can’t come soon enough 😃 This is one rare scenario when Safari was easier to tame than Chrome is. Have you had any discussions with the Chrome team about this? I’d be interested to hear their thoughts.

Would love to see it! Feel free to shoot me an email liam [at] ionic.io.

Ill shoot you an email 😃