bug: iOS PWA swipe back broken

[shprink]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] 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.

https://github.com/user-attachments/assets/53b425ca-49da-4d3e-b938-c7abb3d5c58d

Same as this old closed ticket https://github.com/ionic-team/ionic-framework/issues/26058 Tried the solution here but does not work: https://github.com/ionic-team/ionic-framework/issues/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 https://github.com/ionic-team/ionic-framework/issues/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 https://github.com/ionic-team/ionic-framework/issues/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.

https://github.com/user-attachments/assets/53b425ca-49da-4d3e-b938-c7abb3d5c58d

Same as this old closed ticket https://github.com/ionic-team/ionic-framework/issues/26058 Tried the solution here but does not work: https://github.com/ionic-team/ionic-framework/issues/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.