ionic-framework: ion-menu error on swipe

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

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 1
  • Comments: 31 (8 by maintainers)

Most upvoted comments

Hi everyone,

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

Thanks!

For anyone else getting stuck on this, it looks like this issue was already fixed in the latest ionic version, updating to 4.9.0 seems to fix it for us 🎉

For those still running into issues: Please update to Ionic 4.10.0. We fixed a few more things that should resolve any outstanding issues with the menu swipe. Thanks!

@Flip32 What version of Ionic Framework are you using? Ionic 5.4.1 is likely referring to the version of the Ionic CLI.

Here my Info:

Ionic CLI : 5.4.1 (/usr/lib/node_modules/ionic) Ionic Framework : @ionic/angular 4.9.1 @angular-devkit/build-angular : 0.801.3 @angular-devkit/schematics : 8.1.3 @angular/cli : 8.1.3 @ionic/angular-toolkit : 2.0.0

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

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