bug: Inconsistent/breaking 'swipe to go back` transition on iOS native Ionic build

Bug Report

Ionic version:

[x] 4.4.0

Current behavior:

I discovered inconsistent behavior while using swipeBackEnabled: true on an iOS native Ionic build.

Video of the issue here: https://streamable.com/1ux20

Things to notice in the video:

1. Sometimes, swiping back will cause the animation to trigger twice (seen near the beginning of the video).
2. At the 0:06 second mark, the app transitions to the details page but I can no longer swipe back. When I try to swipe nothing happens (you can see the screen sorta go up and down because my swipes aren’t perfectly horizontal).
3. You’re able to see the home page beneath the details page when swiping down on the details page which uses ion-refresher.
4. Tapping the back-button in the toolbar doesn’t do anything
5. Tapping tabs at the bottom doesn’t do anything either

Expected behavior:

I don’t expect to see doubled animations occasionally and I also don’t expect the app to get “stuck” on a page where I cannot route to a different page or even swipe to go back a page.

Steps to reproduce:

I have only been able to reproduce this on a physical iOS device (but I have reproduced this problem on 2 different Ionic apps, one of my apps is in production with this issue), as I state below this is extremely inconsistent, but I tend to be able to reproduce it more often when I swipe from the very edge of the device from left to right to go back to the home page. Click the “Details page” button to route forward. Do you guys have a suggestion for gesture tracking/recording? That may help debug this issue better so we can pinpoint the exact stroke that breaks things, but I don’t know of such software.

Related code:

Like I said, this is extremely difficult to recreate consistently (typically can get it within the first 50 attempts, but as seen in this video I was able to trigger the problem within 4 attempts, but I have a repo of the demo app you see in the video (ignore the name because I’m using it for another bug submission already):

https://github.com/uncvrd/ion-refresher-bug

Other information:

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.4.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : ios 5.0.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 6 other plugins)

System:

   ios-deploy : 1.9.4
   ios-sim    : 7.0.0
   NodeJS     : v10.15.3 (/usr/local/bin/node)
   npm        : 6.4.1
   OS         : macOS Mojave
   Xcode      : Xcode 10.2.1 Build version 10E1001

[AndreasGassmann]

I can confirm that the “swipe to go back” does result in weird behaviours sometimes.

The 2 biggest issues that I noticed:

• If you start the “swipe to go back” gesture, but then let it go (so you stay on the child page), some elements are transparent. I noticed this when the are area surrounding the ion-searchbar in the header turned transparent (this was fixed by placing it in an ion-toolbar, but the same happens for the “pull down to refresh area”, as shown in this video.
• If you start the “swipe to go back” gesture very slowly, then sometimes the transition gets “stuck”. So moving your finger doesn’t do anything anymore. You have to let go and touch the screen again, which then works nicely again.

I was planning to open up a separate issue for those, but it seems that there are some issues around this feature, so we can summarise them here.

[uncvrd]

To add to @AndreasGassmann additional iOS swipe bugs, I noticed (and have created a bug request) for the background going transparent after “half-swiping” on ion-refresher #18284

I’ve also experienced flickering header icons on transitions. Sometimes, after “swiping to go back” and I tap on another element, the icons flicker at the top of the page, then disappear. I then have to tap on an element again before the page transition happens. You can see the issues here:

Video link: https://streamable.com/147x7

My header looks like this:

<ion-header mode="md" no-border>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button class="back-button" color="light" mode="md"></ion-back-button>
    </ion-buttons>
    <ion-buttons slot="primary" (click)="presentMoreInfoModal()">
      <ion-icon class="more-button" name="share"></ion-icon>
    </ion-buttons>
  </ion-toolbar>
</ion-header>