bug: incorrect nav animation when using browser back and forward button to navigate through multiple pages

[hoi4]

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

v7.x

Current Behavior

Sometimes the nav animation is incorrect when using the browser back and forward buttons to navigate through multiple pages.

Expected Behavior

The nav animation direction should be correct based on the internal navigation stack.

Steps to Reproduce

The following video demonstrates the issue and serves as reproduction steps:

https://github.com/ionic-team/ionic-framework/assets/23243256/8500b406-ff31-43de-96fd-5ec862d5a67c

1. clone the ionic framework repository and apply the necessary build steps to provide the ng16 test project
2. open the tabs page
3. navigate into pages of tab1 twice (see video)
4. use the browser back button twice (back to the tab's root page)
5. use the browser forward button twice --> The second animation is incorrectly a "back" instead of a "forward" animation.

Code Reproduction URL

No response

Ionic Info

Ionic:

   Ionic CLI                     : 7.1.1
   Ionic Framework               : @ionic/angular 7.4.0
   @angular-devkit/build-angular : 16.2.2
   @angular-devkit/schematics    : 16.2.2
   @angular/cli                  : 16.2.2
   @ionic/angular-toolkit        : 9.0.0

System:

   NodeJS : v18.17.1 (/Users/philipp/.nvm/versions/node/v18.17.1/bin/node)
   npm    : 9.6.7
   OS     : macOS Unknown (--> Sonoma)

Additional Information

No response

[thetaPC]

Thank you so much for submitting the issue!

I've been trying to reproduce the issue locally, but unfortunately, I'm having some difficulty. Please provide a minimal reproduction, I recommend using the Starters project and provide a GitHub repo link or a StackBlitz link. You can also provide the build (as mentioned in the description) from Framework Angular.

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

[hoi4]

@thetaPC Thanks for your answer. I'm not very sure what else I can provide. Did you follow the steps I provided above with internal test project? :)

[thetaPC]

@hoi4 Yes, thank you for the steps! I gave them a go, but unfortunately, my team member and I couldn't recreate the animations during browser navigation. I've attached a video showing what we observed. Any chance you could share some extra steps to guide us in reproducing the issue? Appreciate your help!

https://github.com/ionic-team/ionic-framework/assets/13530427/0d1147e0-ef85-4933-85c0-0aef7859cb3c

[hoi4]

I see that this is confusing. Here is the background to the issue and the linked PR:

• I originally created this MR to fix the issue that the nav animation is not applied when using the browser back and forward button
• As the original PR included the fix for the nav animation as well as the fix for the incorrect nav animation (described in this ticket), @liamdebeasi asked me to split up the PR into two separate ones (and create a separate issue for the second part of the original PR)
• The fix to apply the nav animation when using the browser back button has been merged, but will only be released in the next major release. (It is also included in the linked PR to fix the issue described above)
• To reproduce the original behavior you can check out my branch and just set the useDirectionBasedOnStackOrder variable in the StackController to false.

Hope that helps :)

[thetaPC]

@hoi4 Thank you for the reply!

The challenge that we are facing is we are unable to reproduce your issue/recording when checking out a version of the Ionic Framework repository prior to the fix for the nav animation.

To appropriately validate and review your proposed pull request, we require reproducing the issue against the latest version of Ionic Framework. We are currently not able to do that.

Without testing against a modified version of Ionic Framework, is there a minimal reproduction or specific testing steps that we can follow to validate this bug and to verify your fix against?

[hoi4]

As the latest version of Ionic does not apply the nav animation when using the browser back / forward buttons, it is not possible to use the latest version to validate my improvement against. This is only possible when using the feature-8.0 branch (which includes the changes from #28530 ) When using the feature-8.0 branch, it should be possible to follow the steps in the video :)

[thetaPC]

Thank you again for the response! I was able to confirm that this is a bug that is displayed in feature-8.0 branch.