ion-menu error on swipe

[Mawi137]

Bug Report

Ionic version:
[x] 4.x

Current behavior:
When I swipe to open my side menu immediately after the app loaded, the app freezes. When I first tap the menu toggle button and then swipe, everything is fine.

Expected behavior:
App doesn't freeze.

Steps to reproduce:
I was able to reproduce this in Chrome and sometimes I got to see an error (see stacktrace below). I'm even able to get the preview to freeze on the Ionic docs when I swipe just before the app's first view is loaded: https://ionicframework.com/docs/api/menu

Related code:
The stacktrace below led me to this file: core/src/components/menu/menu.tsx of this repo.
The error comes from the loadAnimation function where this.menuInnerEl is undefined at that time:

const width = this.menuInnerEl!.offsetWidth;

Other information:
Stacktrace:

zone.js:682 Unhandled Promise rejection: Cannot read property 'offsetWidth' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'offsetWidth' of undefined
   at t.<anonymous> (n5wnzrch.entry.js:1)
   at step (tslib.js:97)
   at Object.next (tslib.js:78)
   at tslib.js:71
   at new ZoneAwarePromise (zone.js:910)
   at Module.__awaiter (tslib.js:67)
   at t.loadAnimation (n5wnzrch.entry.js:1)
   at t.onWillStart (n5wnzrch.entry.js:1)
   at onWillStart (n5wnzrch.entry.js:1)
   at m (chunk-f56eaea8.js:1) TypeError: Cannot read property 'offsetWidth' of undefined
   at t.<anonymous> (http://localhost:8100/70.js:44:4283)
   at step (http://localhost:8100/80.js:158:21)
   at Object.next (http://localhost:8100/80.js:139:51)
   at http://localhost:8100/80.js:132:69
   at new ZoneAwarePromise (http://localhost:8100/polyfills.js:3268:29)
   at Module.__awaiter (http://localhost:8100/80.js:128:10)
   at t.loadAnimation (http://localhost:8100/70.js:44:4107)
   at t.onWillStart (http://localhost:8100/70.js:44:5351)
   at onWillStart (http://localhost:8100/70.js:44:2193)
   at m (http://localhost:8100/common.js:84:6209)

Ionic info:

   ionic (Ionic CLI)             : 4.10.2 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.2.0
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.5.0

[liamdebeasi]

Hi there,

Thanks for the issue. I am unable to reproduce this. Can you provide a repository with the code required to reproduce this issue?

Thanks!

[Mawi137]

I even get this behaviour on the ionic docs site. I made a short screen recording to show you what I mean: https://www.youtube.com/watch?v=NJImYz6dOAE

I get the same when developing the app in Chrome and when deploying it to an Android device. It doesn't show an error mostly, but sometimes it does and I get a stacktrace as the one above. FireFox also shows the same behaviour.

[Mawi137]

I also get this with the Ionic side nav starter project. But you already have to swipe before the view is loaded (when the splash screen would still be active in an Android app).

[marckassay]

This has been reported earlier this year. Still open issue #16985

[marckassay]

@liamdebeasi I just installed and built this repo that demonstrates this issue. The debug and release apks are in the releases folder. Since this is a minimal app, in order to replicate the issue, you need to frantically swipe right-to-left immediately after launching. After splashscreen disappears, swipe to see if left and right sidemenus operate as expected.

I do have a more developed ionic app, AIT, that needs no frantic swiping, just swipe normally upon launching and the issue will be seen.

[Mawi137]

I fixed it for now using the swipeGesture input on ion-menu. It's set to false until the splash screen is hidden.

[marckassay]

@Mawi137 I used that yesterday and the problem was still persistent. Perhaps whenever the UI thread is processing, any swipe gestures will interfere with layout, IDK.

swipeGesture isn't documented, so for the record, I assumed you used it in the template in a similar fashion as the following?

<ion-menu [swipeGesture]="isSwipeEnabled" ... >

[Mawi137]

Indeed, but it only fixed the issue on my laptop, not when running it as an Android app..

[Mawi137]

I added some logging to the menu.tsx file and it seems like it only captures the start of the swipe gesture, but no move, end or notCaptured. So it adds the show-menu css class, but doesn't start the menu animation. That results in the menu not being visible and clicking being blocked..

[liamdebeasi]

Hi everyone,

I was able to reproduce this issue. We will look into it!

Thanks!