bug: iOS PWA swipe back broken

[shprink]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

Swipe back runs the animation twice.

ScreenRecording_07-25-2024.10-45-41_1.MP4

Same as this old closed ticket #26058
Tried the solution here but does not work: #22299

 await this.platform.ready().then((platform: string) => {
      console.log({platform})
      if (this.platform.is('ios')) {
        const el = document.querySelector('ion-router-outlet');
        console.log({el})
        if (el) {
          this.gesture = createGesture({
            el,
            gestureName: 'goback-swipe',
            gesturePriority: 400,
            threshold: 10,
            onStart: () => false,
            onMove: () => {},
            onEnd: () => {},
          });
          this.gesture.enable(true);
        }
      }
    });

also tried to disable swipe back, does not work

provideIonicAngular({
     swipeBackEnabled: false,
   }),

Expected Behavior

Swipe back should run the animation once only.

Steps to Reproduce

1. follow your guide to instal the sidemenu app: ionic start ionicLatest sidemenu (I chose angular and standalone)
2. Run on ios PWA

Code Reproduction URL

https://ionicframework.com/docs/developing/starting

Ionic Info

Ionic:

Ionic CLI : 7.2.0
Ionic Framework : @ionic/angular 8.2.6
@angular-devkit/build-angular : 18.1.2
@angular-devkit/schematics : 18.1.2
@angular/cli : 18.1.2
@ionic/angular-toolkit : 11.0.1

Additional Information

No response

[liamdebeasi]

This is the same as #22299. Ionic's swipe to go back is running as well as the native Safari swipe to go back gesture. Ideally, developers have a way of disabling Safari's swipe to go back gesture in a PWA.

[shprink]

Yes I saw this ticket as I stated in the ticket. The solution there does not work. Ideally the templates ionic start ionicLatest sidemenu should work by default on iOS as well. Seems like a bug to me

[liamdebeasi]

What I meant was that the problem reported here is the same as the problem reported in #22299. Ultimately, this needs to be fixed at the platform (iOS/WebKit) level since it is not an Ionic bug, so having duplicate issues open here won't help too much.

[shprink]

Since there are 2 of such events and you control 1, can't you disable yours ? Or do we have as developers that control?

[liamdebeasi]

Developers are able to disable the Ionic swipe gesture using swipeGesture on ion-router-outlet or swipeBackEnabled in the global config.

[shprink]

This does not work. Try it

[liamdebeasi]

If the config isn't working I'd file a bug report with the team and include a reproduction.

[shprink]

Yes it is all explained in this ticket.

Steps to Reproduce

1. follow your guide to instal the sidemenu app: ionic start ionicLatest sidemenu (I chose angular and standalone)
2. Run on ios PWA

Current Behavior

Swipe back runs the animation twice.

ScreenRecording_07-25-2024.10-45-41_1.MP4

Same as this old closed ticket #26058
Tried the solution here but does not work: #22299

 await this.platform.ready().then((platform: string) => {
      console.log({platform})
      if (this.platform.is('ios')) {
        const el = document.querySelector('ion-router-outlet');
        console.log({el})
        if (el) {
          this.gesture = createGesture({
            el,
            gestureName: 'goback-swipe',
            gesturePriority: 400,
            threshold: 10,
            onStart: () => false,
            onMove: () => {},
            onEnd: () => {},
          });
          this.gesture.enable(true);
        }
      }
    });

also tried to disable swipe back, does not work

provideIonicAngular({
     swipeBackEnabled: false,
   }),

[liamdebeasi]

You aren't using Ionic's swipe back gesture in this case, which is why the config appears to have no effect. When you swipe back in your video you are reproducing the native/iOS swipe back gesture. When the navigation event occurs Ionic then will run a "go back" animation (since we did go back). In this case, what you probably want to disable is the transition (whereas you were only disabling the Ionic gesture, the logic associated with dragging your finger across the screen).

You can either set [animated]="false" on the router outlet or pass a () => createAnimation() to navAnimation in the Ionic config.

[shprink]

Hello,
I don't want to remove ionic push animations.
So there is no way to make it work with native swipe back ? can't we disable it ? Native swipe back works fine on Android, is it a restriction on safari ios ?

[liamdebeasi]

Yes, it's a restriction on Safari iOS, not Ionic. #22299 exists to track the status of this restriction. I proposed a Web App Manifest API for this to browser vendors back in 2022: #22299 (comment)

[shprink]

I hate iOS man...

have you tried what chatgpt is talking about?

document.addEventListener('touchstart', function(event) {
    // Detect if the touch is horizontal (x-axis)
    const initialX = event.touches[0].clientX;

    document.addEventListener('touchmove', function(event) {
        const currentX = event.touches[0].clientX;
        const diffX = currentX - initialX;

        // If swipe is significant enough in the horizontal direction, prevent it
        if (Math.abs(diffX) > 50) {
            event.preventDefault();
        }
    });
});

[liamdebeasi]

I recall seeing something similar to that several years ago, but given how much iOS has changed since then I'm not sure if it still works. Worth a shot though!

[raykin]

The above workaround didn't work. It's strange, sometimes it can work only once(especially after page refreshed) but most time it didn't work in Chrome of iOS.
However if I debug the workaround code in chrome console in macOS, the preventDefault always called for a swipe action. Btw, I config the initialX to be less than 30 and also reduced 50 to 5 to make sure swiper action always match the code logic.

[jramosg]

Any news here? What is people doing to prevent double animation on browser but not disabling it in native? Thanks!