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

[jakubkoje]

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

Related code:

https://github.com/jakubkoje/ionic-back-issue

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

[liamdebeasi]

Can you try the following dev build and let me know if it resolves the issue?

npm install @ionic/vue@5.6.0-dev.202102082152.e5c304b @ionic/vue-router@5.6.0-dev.202102082152.e5c304b

[jakubkoje]

Now it seems like instead of being stuck in between, it gets stuck on the subpage, not allowing me to navigate back trough swipe or back button.

[liamdebeasi]

Thanks, this dev build should fix the issue.

npm install @ionic/vue@5.6.0-dev.202102082226.d47cbf7 @ionic/vue-router@5.6.0-dev.202102082226.d47cbf7

[jakubkoje]

It still gets stuck sometimes. It has to be really slight and fast swipe, so the animation doesn't start rendering, but the styles of the components change.

[liamdebeasi]

so the animation doesn't start rendering, but the styles of the components change.

Can you clarify what this means? I cannot reproduce the issue with the latest dev build.

[jakubkoje]

https://imgur.com/oC5WKYf
It could be unrelated to this issue
I noticed it when I swipe really fast and release mouse very quick. It seems like it triggers some animation properties on elements, but it doesn't start the animation. Then it gets stuck on the page.

[capc0]

this also happens for us on angular

[kiralyta]

This was an annoying bug for me as well in 5.4.x and now it is definitely fixed in 5.6.4. Thank you!

[kiralyta]

This was an annoying bug for me as well in 5.4.x and now it is definitely fixed in 5.6.4. Thank you!

So let me correct myself. It's still happening, just less often. Look below video I made. It's hard to reproduce, I needed to try like 10 times. For sure you need to swipe back really fast. If the issue comes up, my application breaks. I'm on @ionic/vue 5.6.6.

RPReplay_Final1620221580.MP4

[CharlieHorton]

I am also experiencing exactly the same thing, currently running ionic/vue 5.6.7.

As the original bug report says I only get this when swiping backwards fast, swiping slowly causes no issues.

Would be great to get an update on this.

[capc0]

little update on my side: we rolled out PR #23128 about 2 months ago to more than 100 users and did not receive any swipe-back bugs since then

[liamdebeasi]

Hi everyone,

We appreciate your patience as we work to resolve this issue. I think I found a solution similar to what we do in ion-nav that does not require duplicating the swipe back gesture. Can you try the following dev build and let me know if it resolves the issue?

npm install @ionic/vue@5.7.0-dev.202106281906.6da058d @ionic/vue-router@5.7.0-dev.202106281906.6da058d

With this dev build, I am no longer able to the behaviors found in #22895 (comment) and #22895 (comment).

[capc0]

your fix is not specific to vue, right? if you can also provide a angular dev build I can check that.

[liamdebeasi]

Here is an Ionic Angular dev build:

npm install @ionic/angular@5.7.0-dev.202106291303.470a9c4

[jakubkoje]

Now, instead of a midway stuck animation, I can't go back to the previous page when the bug happens.

[liamdebeasi]

Can you provide some additional information on how to reproduce this? I was not able to reproduce that behavior on my end.

[jakubkoje]

I just barely (fast and small distance) swipe back, that the visible animation won't trigger, but some values will get changed. Mouse has to be released right when the animation would start.

[CharlieHorton]

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]

Upload.from.GitHub.for.iOS.MOV

Here is a screen recording for reference, the first few times the swipe back works but on the last time it does a little jitter and bricks, you can see I'm pressing the back button and switching tabs with no response.

[capc0]

@liamdebeasi maybe my PR is not the best way of preventing the issue, but the cause is accurate IMO. I spent several hours debugging the gesture.

While debugging the swipe back gesture I noticed that there are some race conditions where the animation is never stopped. The endlessly running animation blocks all further animations/routing of the entire app (e.g. back-button, tabs, ...).

This happens when the swipe back gesture is performed very fast (not fast in the sense of quickly performing the gesture multiple times like in issue #15154, but instead only performing it once which a fast finger movement). This can especially be reproduced in about 50% of cases when trying to perform the gesture with as little time and horizontal movement of your finger as possible on the far left side of the page/device.

Debugging actually shows, that the gesture ends (onEndHandler called in swipe-back.ts) BEFORE the animation actually started and the reference to the animation ani in route-outlet.tsx is set. Since the animation is progress-based and is only ever stopped by calling progressEnd, this leads to the endlessly running animation.

I dont see how your latest PR handles this race condition.

[liamdebeasi]

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 #23527 is no longer present.

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

[liamdebeasi]

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]

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

[jakubkoje]

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

[CharlieHorton]

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

[liamdebeasi]

Thanks for the issue. This has been resolved via #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.

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