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

[uncvrd]

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>

[hiepxanh]

yes sir, I have the same issue, but the problem is now with cordova-plugin-googlemaps

[hiepxanh]

aw, damn it. That set background to white, will remove the google map layout. I have to set it become transparent. so sad :(

[pipoa]

I have the same issue, the bug happens very often and can be recreated easily, especially quick enter -> swipe back -> enter -> swipe back ... actions.
ionic 4 swipe back is buggy all the time~
note that swipe back is an important feature of iOS, we cannot make an app without it.

[NickRussell95]

Are there any updates on this? I'm experiencing all of the same issues and it's quite frustrating to have to disable swipe to go back app-wide because of them. I can easily recreate the issue if I push multiple pages on, and then swipe back quickly multiple times (ie. start the next swipe before the first animation has finished.). Sometimes when I do this the whole app jams and all tap events stop working, I can't event change tabs in my tab controller.

It would be great to have an event hook for when a swipe back has started, and for swiping to be disabled when a current back animation is in progress.

[gbrits]

I'm currently experiencing an issue where the background goes transparent when swiping back / transitioning back, once the Google Map is loaded. This is due to the fact that the map isn't actually an element but a background, with a viewport window cut out to display it. That's the way I understand it... anyone encountered this and have any hack to fix it?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. 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.

Thank you for using Ionic!