bug: Ionic Page Navigation Animation Gets Stuck (iOS)

[elvisgraho]

Bug Report

Ionic version: [x] 5.6.7

Current behavior: When I navigate between different Pages using ion-cards and this.router.navigate (click event), everything is fine, and the navigation animation looks good.

When, however, I try to navigate very fast by clicking on the cards, spamming the clicks with navigation event, in the middle of animation, the bug seems to occur. The subsequent calls of this.router.navigate navigate (the promise returns true), but the component gets visually stuck (no animation no navigation) and the subsequent clicks on this.router.navigate return null, because Angular assumes that I already am navigated.

Steps to fix: I know this is animation issue, because I can fix it by settings IonicModule.forRoot({ animated: false })

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.16
   Ionic Framework               : @ionic/angular 5.6.7
   @angular-devkit/build-angular : 0.1102.6
   @angular-devkit/schematics    : 11.2.6
   @angular/cli                  : 11.2.6
   @ionic/angular-toolkit        : 3.1.1

Capacitor:

   Capacitor CLI   : 2.4.7
   @capacitor/core : 2.4.7

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : none
   Cordova Plugins   : no whitelisted plugins (0 plugins total)

Utility:

   cordova-res                          : 0.15.3
   native-run (update available: 1.3.0) : 0.3.0

System:

   Android SDK Tools : 26.1.1 (/Users/graholskise/Library/Android/sdk)
   NodeJS            : v12.14.1 (/Users/graholskise/.nvm/versions/node/v12.14.1/bin/node)
   npm               : 6.13.4
   OS                : macOS Big Sur
   Xcode             : Xcode 12.5 Build version 12E262

[elvisgraho]

It happens when I spam click buttons that navigate. The left side of a screen glitches for one second, and subsequent navigation does not occur.

Three fast subsequent clicks on one ion-card that proc router.navigate seem to reproduce the issue which blocks subsequent navigations

[elvisgraho]

I also have ion-cards (with navigation) located in the same place on the screen (on different pages), so there is a possibility that I am clicking next navigation, before the current animation is finished.

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

[elvisgraho]

https://github.com/elvisgraho/ionic-bug/tree/main

You would need to generate iOS project. Interesting is that when side navigation is disabled, you cannot possibly reproduce the bug. But when the side navigation is enabled, you can reproduce the bug by spamming buttons. Must be a conflict of those two animations (swipable side navigation and page transition animation)

When I spam the buttons i must accidentally trigger the side nav animation for a split second. Thats why I previously wrote about a screen glitch. (however I do not do swipe gestures, i just spam the button with a finger)

[elvisgraho]

New issue that seems to narrow down the problem - https://github.com/ionic-team/ionic-framework/issues/23391

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