Ionic-framework: bug: canceling swipe back animation causes white screen on android devices

[capc0]

Bug Report

Ionic version:


[x] 5.x

Current behavior:

Using swipe gestures to navigate back on Android devices leaves the screen completly white if the gesture is canceled mid-way.

Expected behavior:

Swipte back gesture should show the previous screen.

Steps to reproduce:

1) Push a new page in the view stack with navigateForward
2) Start the swipe back gesture (finger on left device side and move to the right)
3) ... while holding the finger down, move back to the left side (to cancel the swipe animation)
==> Screen stays white

You can perform the gesture in a few milliseconds or take your time and do it very slowly. It is 100% reproducible.

Related code:

Enable the following in the app.module.ts

IonicModule.forRoot({
     swipeBackEnabled: true 
}),

https://github.com/capc0/ion-android-swipe-gesture-white-screen

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.9 (C:\Users\Simon\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 8.3.26
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : android 8.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.0, (and 4 other plugins)

Utility:

   cordova-res : 0.6.0 (update available: 0.12.0)
   native-run  : 0.2.8 (update available: 1.0.0)

System:

   NodeJS : v10.16.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.13.7
   OS     : Windows 10

[liamdebeasi]

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

[capc0]

@liamdebeasi can you check if this is included in the actual 5.1.0 build? The issue is still present in that version for me. If it is, the fix is not working :/

[capc0]

The problem seems to be that the ``display: none``` style does not get removed when canceling the animation

edit: I just checked your commit (https://github.com/ionic-team/ionic/pull/21058/files), seems to me like leavingPage.elements[0] focuses the wrong HTML element.

[Airdevelopments]

Issue is also present for me! Please fix!

[liamdebeasi]

All fixed. Here is a dev build if you would like to test: 5.2.0-dev.202005081341.bb62023.

[capc0]

LGTM. thanks for the quick response.

[davorduhovic]

I think I found a similar issue to this one.

If you navigate forward and quickly swipe back while 'forward animation' is still in progress, it will go to previous screen and that screen will be blank because 'ion-page-hidden' class is not removed in that case.

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