bug: Incorrect transition animation on 'forward' using Vue useIonRouter navigate/replace

[3zzy]

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

• [ ] v4.x
• [ ] v5.x
• [X] v6.x

Current Behavior

In order to completely disable native back swipe in IOS I’m having to use replace instead of push and its working fine except for one issue … disorienting page transitions.

I expect IonRouter.navigate(url, "forward", "replace") to show a forward animation but instead it shows a back animation. Also the other issue I've noticed is that is that the very first transition almost always is abrupt ie. without any animation at all.

Here’s it in action: Screen Recording 2022 03 21 at 6 18 11 pm - YouTube 4

Expected Behavior

forward animation when using forward

Steps to Reproduce

Navigate between pages using IonRouter.navigate(url, "forward", "replace") in IonicVue

Code Reproduction URL

No response

Ionic Info

Ionic:

   Ionic CLI       : 6.19.0
   Ionic Framework : @ionic/vue 6.0.12

Capacitor:

   Capacitor CLI      : 3.4.3
   @capacitor/android : 3.4.3
   @capacitor/core    : 3.4.3
   @capacitor/ios     : 3.4.3

Utility:

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

System:

   NodeJS : v16.13.1 
   npm    : 8.4.0
   OS     : macOS Montere

Additional Information

No response

[averyjohnston]

Thanks for the issue. Could you provide a Github repo we can use to verify? This will also help us confirm the fix down the road.

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[3zzy]

@amandaesmith3 https://github.com/3zzy/test

[averyjohnston]

Thanks! I'm able to replicate both issues (no transition on the first navigation, then always using the back transition from then on).

[3zzy]

@amandaejohnston Wondering if there's any ETA for this bugfix? Thanks!

[3zzy]

I wonder how everyone else is able to workaround this major navigation issue. Is there a temporary solution while we wait for this to be fixed properly?

[loremru]

there isn't actually animation on replace