[4.0.0-rc.0] Swiping while app is starting blocks input

[nlin-genisys]

Bug Report

Ionic version:

[x] 4.x

Current behavior:

Swiping from left side towards right while app is starting blocks all touch input. This situation occurs if the project has a side menu. When inspecting the issue via Chrome DevTools, body has class="backdrop-no-scroll". If app isn't swiped while starting, body doesn't have that class, and input works as it should.

Expected behavior:

Input should behave normally after app has started, even if the screen has been swiped.

Steps to reproduce:

1. Create a project with sidemenu starter

2. Run app on phone (android, maybe also ios)

3. Swipe from left side towards right while the app is starting (before home page is fully loaded)

4. Try to click a link, button or swipe side menu open

Other information:

I was able to repeat this with ionic serve on Chrome, but it's easier to catch it on phone with splash screen on start.

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.6.0 (C:\Users\user\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0-rc.0
   @angular-devkit/build-angular : 0.11.4
   @angular-devkit/schematics    : 7.1.4
   @angular/cli                  : 7.1.4
   @ionic/angular-toolkit        : 1.2.2

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.1, (and 4 other plugins)

System:

   NodeJS : v8.11.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 7

[tytsim]

I experienced the same issue with ion-menu and [swipeGesture]="true".

Ionic version: [x] 4.x

Current behavior: Menu is broken if we swipe for the first time while the browser UI thread is busy. Its transparent backdrop masks the whole app so no other user interaction can be done.

Expected behavior: Menu is either closed or opened.

Steps to reproduce:

1. Create a project with sidemenu starter (ionic start myApp sidemenu)

2. Run the app (ionic serve)

3. Adjust browser window width so that the menu is closed / split pane is collapsed

4. Swipe for the first time while UI thread is busy (can be simulated by adding the code below and swipe immediately after the console message ("0") or 5 seconds since app is initialized)

Related code:

In initializeApp() of src/app/app.component.ts

let i = 0;
setTimeout(() => {
  console.log(0);
  while (i++ < 1000000000);
  console.log(i);
}, 5000);

Other information:

Browser: Google Chrome 72

Menu's backdrop when it is broken.

<ion-backdrop class="menu-backdrop backdrop-no-tappable hydrated show-backdrop" tabindex="-1" style="will-change: opacity;"></ion-backdrop>

This issue will not happen if the menu has been opened / closed before.

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.11.0 (C:\Users\user\AppData\Roaming\nvm\v10.11.0\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.1.0
   @angular-devkit/build-angular : 0.13.5
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.5
   @ionic/angular-toolkit        : 1.4.0

System:

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

[marckassay]

I'm experiencing the same issue. That is immediately after I tap to launch an ionic (android) app, if the user aggressively swipes right-to-left until splash screen disappears, a single swipe left-to-right yields this:

The image illustrates start and end menu both on the left side of a home page.

[nlin-genisys]

This issue seems to be fixed in Ionic 4.11.2!

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