bug: ios safari swipe back transition Execution is messed up

[d1y]

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

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

The @ionic/vue I used, iOS Safari returns to the previous page, and the animation will be executed again

Expected Behavior

Return to the previous page. The animation will only be triggered once 😂

Steps to Reproduce

Screen.Recording.2022-08-25.at.13.35.49.mov

Code Reproduction URL

No response

Ionic Info

Our project is running on the web, no cross platform code is used

[WARN] You are not in an Ionic project directory. Project context may be missing.

Ionic:

   Ionic CLI : 6.20.1

Utility:

   cordova-res : not installed globally
   native-run  : not installed globally

System:

   NodeJS : v16.16.0
   npm    : 8.11.0
   OS     : macOS Monterey

Additional Information

the main.ts file

app.use(IonicVue, {
  mode: "md",
})

app.use(router)
router.isReady().then(() => {
  app.mount("#app")
})

the router.ts file

const router = createRouter({
  history: createWebHashHistory('/'),
  routes: [] // !!ignore the line
})

export default router

I don't know what happened, but I know that this seems to be Safari's default behavior (sliding left and right) 🧐

[liamdebeasi]

Thanks for the issue. I am going to close this as this is not a bug in Ionic Framework. When you navigate back in an Ionic app, we will play the page leaving transition. What is happening here is you are triggering the native iOS swipe to go back transition. Since you are also going back, the Ionic page transition will play as well.

Unfortunately, we are not aware of a reliable way to suppress this built-in swipe back gesture. There is a related issue here: #22299. I proposed a new feature to the Web Manifest working group that should resolve this issue at least when running apps as a PWA: w3c/manifest#1041.

While I understand this may not be the desired result, Ionic is working as intended here. Other developers have discussed workarounds in #22299 that you may find valuable for your use case. Thanks for the report!

[d1y]

@liamdebeasi Thanks Reply
But. it seems that there is no good solution for now, can I set the routing globally without transition animation (I don't seem to see the option) to make it look less blunt 😢

↓↓↓ Does this seem like a configuration? ↓↓↓ 🤔

ionic-framework/core/src/components/router-outlet/route-outlet.tsx

Line 190 in 360643d

const animated = this.animated && config.getBoolean('animated', true);

[liamdebeasi]

You could certainly disable animations in Ionic. That may be the best path forward so that the swipe to go back gesture on iOS does not interfere with Ionic.

You could also use platform detection to only disable animations when running in a browser/PWA so that you can still get animations if you are using Capacitor too.

[d1y]

You could certainly disable animations in Ionic. That may be the best path forward so that the swipe to go back gesture on iOS does not interfere with Ionic.

You could also use platform detection to only disable animations when running in a browser/PWA so that you can still get animations if you are using Capacitor too.

Please how can I drop the Transition of Vue in ionic, I don't seem to see it 😢

[liamdebeasi]

The Ionic Vue Configuration Documentation shows how to disable animations globally. The Router Outlet animated property goes over how to disable only page transitions.

[d1y]

The Ionic Vue Configuration Documentation shows how to disable animations globally. The Router Outlet animated property goes over how to disable only page transitions.

After I disable it, the problem also exists, am I doing something wrong in that step?

This does disable the animation, but the splash screen display is still there

Screen.Recording.2022-08-26.at.22.08.44.mov

<ion-app class="font-sans">
  <ion-router-outlet :animated="false" />
</ion-app>

app.use(IonicVue, {
  mode: "ios",
  animated: false,
  swipeGesture: false,
  swipeBackEnabled: false,
})

[liamdebeasi]

I don't have access to the code, so it is hard to say what the issue is. There may be a delay of a few frames when swapping out active/inactive pages.

[d1y]

I don't have access to the code, so it is hard to say what the issue is. There may be a delay of a few frames when swapping out active/inactive pages.

I tried it again and found that if I replace <ion-router-outlet /> with <router-view />, the animation seems to have no problem (no screen splash), but it will not be remembered after that Height of scrolling (also lost the keep-alive behavior of the ionic router), which is not what I want😫

[liamdebeasi]

Unfortunately, we do not provide technical support on this issue tracker. I recommend posting on the Ionic Forum. There are a lot of friendly developers there who may be able to help out. If after doing some debugging you think you have found a bug in Ionic, feel free to open another issue and we can take a look.

[d1y]

@liamdebeasi I created a sample project with about this bug can you help me take a look, thanks for your reply
https://github.com/d1y/safari_router_bug

Screen.Recording.2022-08-27.at.00.47.55.mov

[ionitron-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.