Ionic-framework: [v4] Swipe back for iOS when horizontally scrolling

[georgechr]

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)          : 4.1.2 (/usr/local/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.17
   @angular-devkit/core       : 0.8.3
   @angular-devkit/schematics : 0.8.3
   @angular/cli               : 6.2.2
   @ionic/ng-toolkit          : 1.0.8
   @ionic/schematics-angular  : 1.0.7

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0, browser 5.0.4, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.0, (and 22 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/yiannis/Library/Android/sdk)
   ios-deploy        : 2.0.0
   NodeJS            : v8.11.4 (/usr/local/bin/node)
   npm               : 5.6.0
   OS                : macOS High Sierra
   Xcode             : Xcode 10.1 Build version 10B61

Describe the Bug
beta-16 introduced the ability to swipe-back in iOS mode. This is great and it works fine except when horizontally scrolling an element. Instead of allowing the horizontal scroll Ionic swipes back

Steps to Reproduce
Steps to reproduce the behavior:

1. Stack a view with a horizontally scrollable element
2. Try to swipe right on the element

Result: Instead of the element scrolling to the left, Ionic "swipes back" the view.

Additional Context
Have tried

• Preventing default behavior of the scroll event on the scrollable element -> no effect
• Setting swipeGesture to false while a horizontal scroll is taking place -> works on the browser but not on devices. Sometimes the swipe back is engaged before the horizontal scroll and sometimes the whole app seems to go into a bad state where the back button takes up the whole toolbar and app is unresponsive (have to kill and restart)

[kinggolf]

Thanks for bringing this up and posting. Moved from beta-16 to beta-17 and my app defaulted to swipe back enabled on iOS. Added swipeGesture set to false in ion-router-outlet, per below, and working fine w/out swipe back. I have a view with horizontal scrolling and prefer my app has no swipe back at all, but this was definitely a functional change from beta-16 to beta-17.

<ion-app>
  <ion-router-outlet [swipeGesture]="false"></ion-router-outlet>
</ion-app>

Thanks for great ionic-team support!

[KevRyan2]

@kinggolf have you found a way in ionic 4 to disable swipeBack at a page level rather than at a global level? it seems they removed the swipeBackEnabled method on NavController

[kinggolf]

Hi @KevRyan2, no. I'm only using it globally in my apps, but I scanned the nav files and could find nothing related to single page control of swipeBack. Feature request?

[AKosmachyov]

@georgechr
As a temporary solution for ion-router-outlet with ion-menu:

const routerOutlet = document.getElementsByTagName('ion-router-outlet')[0];
routerOutlet.swipeHandler.canStart = () => false;

const sideMenu = document.getElementsByTagName('ion-menu')[0];
sideMenu.swipeGesture = false;

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