bug: iOS PWA swipe back broken

[shprink]

trafficstars

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.

[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. https://github.com/ionic-team/ionic-framework/issues/22299 exists to track the status of this restriction. I proposed a Web App Manifest API for this to browser vendors back in 2022: https://github.com/ionic-team/ionic-framework/issues/22299#issuecomment-1150471987

[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!

[jsc31994]

Literally having the same issue, sad to see this has not been resolved yet.

[jsc31994]

I was able to hack up a fix by doing the following. I know its React, but pretty sure something similar can be done in other frameworks:

import { IonRouterOutlet, useIonRouter } from "@ionic/react";
import { Route } from "react-router-dom";

const SamplePage: React.FC = () => {
  const router = useIonRouter();

 const isIOSDevice = (): boolean => {
   return (
     /iPad|iPhone|iPod/.test(navigator.userAgent) && !(window as any).MSStream
   );
 };

  return (
    <IonRouterOutlet
      id="sample-page"
      animated={
        isIOSDevice()
          ? router.routeInfo.routeDirection === "forward"
            ? true
            : false
          : true
      }
    >
      <Route exact path="/page-1" component={Page1} />
      <Route path="/page-2" component={Page2} />
    </IonRouterOutlet>
  );
};

export default SamplePage;

When you navigate forward the page will animate, but when you manually go back in PWA mode, then WebKit's back animation will play, but Ionic's won't. Keep in mind that I haven't tried this while navigating programmatically, but I'll cross that bridge once I get there.

(and yes, I know the code inside the animated prop can be simplified)

[thetaPC]

Closing this issue as it's a duplicate of https://github.com/ionic-team/ionic-framework/issues/22299. I recommend subscribing to the original issue for updates.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.