ionic-framework: bug: ionic vue, swipe back transition gets stuck when swiping quickly

Bug Report

Ionic version: [ ] 4.x [x] 5.x

Current behavior: Sometimes, when swiping back fast, the view gets stuck in left half and prevents navigating to the page I was navigating back from.

Expected behavior: I should be able to swipe with any speed and not cause the application to be stuck on left side of the screen.

Steps to reproduce:

1. npm install
2. ionic serve
3. Click the button to go to the subpage
4. Swipe back
5. Repeat until the screen gets stuck

Other information: No errors in console when it happens or when I try to navigate away while the screen is halfway.

Example video: https://imgur.com/g0Sy7Zm

Ionic info:

Ionic:

   Ionic CLI       : 6.12.4 (/home/jakub/.nvm/versions/node/v14.15.4/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 5.5.4

Capacitor:

   Capacitor CLI   : 2.4.4
   @capacitor/core : 2.4.4

Utility:

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

System:

   NodeJS : v14.15.4 (/home/jakub/.nvm/versions/node/v14.15.4/bin/node)
   npm    : 7.5.2
   OS     : Linux 4.19

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 4
Comments: 27 (14 by maintainers)

Commits related to this issue

fix(anim): prevent infinite swipe back animations closes #22895 — committed to capc0/ionic-framework by capc0 3 years ago
fix(router-outlet): improve reliability of swipe back gesture when quickly swiping back (#23527) resolves #22895 — committed to ionic-team/ionic-framework by liamdebeasi 3 years ago

Most upvoted comments

So the second issue here is that the animation for swipe to go back is set asynchronously: https://github.com/ionic-team/ionic-framework/blob/master/core/src/utils/transition/index.ts#L149

While not common, it is possible for the gesture to start and end before the animation has even been set. When ion-router-outlet waits for the gesture to end the animation in https://github.com/ionic-team/ionic-framework/blob/master/core/src/components/router-outlet/route-outlet.tsx#L187, that promise never resolves because the gesture has already ended. As a result, the isTransitioning flag in my PR is never reset and the screen “locks up” since it is waiting for the animation to finish.

I am going to work on a fix and will post another dev build here when I have it.

liamdebeasi on Jun 30, 2021

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/23527, and a fix will be available in an upcoming release of Ionic Framework.

In the meantime, please feel free to continue testing, and let me know if you run into any issues testing the fix.

liamdebeasi on Jul 9, 2021

My PR prevents a new gesture from starting while the transition is finishing via the isTransitioning flag. What’s happening here is there are two bugs related to the swipe to go back gesture. The second one is easier to reproduce now because the first bug fixed by https://github.com/ionic-team/ionic-framework/pull/23527 is no longer present.

I will work on revising my PR to see if I can address the second issue too.

liamdebeasi on Jun 30, 2021

@liamdebeasi looks good for me as well. Can no longer reproduce either of the issues mentioned. Thanks for the update 👍

CharlieHorton on Jul 9, 2021

Just did a quick test and also can’t reproduce it.

jakubkoje on Jul 7, 2021

I think I finally have a solution that works well 😄 . I’ve tested it and I cannot reproduce the issues noted in this thread, but it would be great to have some additional testers. Here is a dev build if anyone would like to give it a shot:

5.7.0-dev.202107071657.fb1029e

liamdebeasi on Jul 7, 2021

I am also experiencing this new bug on the new build, using Vue. When I perform a similar quick swipe back that would cause the old stop half way bug, now it doesn’t seem to start the transition at all, I remain on the same page and am unable to use the app, pressing the back button or swiping after that point yields no response, I am using a tab view and I am able to select a different tab but the page doesn’t change.

CharlieHorton on Jun 30, 2021