Ionic-framework: 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!

[stewwan]

what's the status of this?

[stewwan]

I'm having to disable menu gestures (which is a pain for ux) to avoid issues on scroll. that's crazy.

[stewwan]

correction: even disabling gestures the whole view still being blocked. no scroll no touch after closing menu. not sure if this is related, I'll reproduce an example and file a new issue.

[marckassay]

@stewwan in regards to your last post, it seems you may be running into this other issue #16002.

I spent significant amount of time trying to find solutions for these issues and finally settled on the following workaround for my app. I've only developed this app to be used on Android, so I'm not sure how or if it pertains to iOS:

• From a UX perspective

  • Replaced the default splashscreen plugin by using cordova-plugin-lottie-splashscreen. I can't recall if this is required for this workaround. Since, I believe, if the user interacts with the display when the splashscreen is shown this issue will be replicated.
  • After splashscreen is hidden, my app disables swiping and menus, and are only enabled when the user taps on a button.

• From a code perspective

  • My app's app.component.html has the following, which areSideMenusInteractive field is set to true after user has tapped on button mentioned above:

  <ion-app ngClass="{{theme}}">
   <ion-menu side="start" menuId="start" [swipeGesture]="areSideMenusInteractive">
     <side-menu id="start"></side-menu>
   </ion-menu>
   <ion-menu side="end" menuId="end" [swipeGesture]="areSideMenusInteractive">
     <side-menu id="end"></side-menu>
   </ion-menu>
   <ion-router-outlet main></ion-router-outlet>
  </ion-app>
  

  • In an addition, I'm also setting the side menus to be enabled in this fashion after user has tapped on button:

  this.menuCtrl.enable(value, 'start')])
  .then(() => {
   return Promise.resolve();
  })
  .catch((reason) => {
   error(reason);
  });
  

  • AND NOT setting the side menus to be enabled in this fashion after user has tapped on button:

  // broken code below
  this.menuCtrl.get(id)
  .then((element) => {
   element.swipeGesture = value;
   return Promise.resolve();
  })
  .catch((reason) => {
   error(reason);
  });
  
  

I hope that helps.

[stewwan]

unfortunately it doesn't @marckassay but thanks for your time. my problem is related with long lists fetched asynchronously and on demand (when you reach the bottom of screen). am still trying to reproduce this problem in a freshed ionic app to share.

[hanibhat]

I'm having this same issue. Are there any updates?

[marckassay]

@hanibhat I'm curious to know myself since I haven't been programming in Ionic since May. I received notification for PR #18806 a few weeks ago, which I believe is a related issue. Hopefully someone will chime in to clarify.

If I recall correctly, the splashscreen suggestion that I gave above wasn't needed, but the other part is:

After splashscreen is hidden, my app disables swiping and menus, and are only enabled when the user taps on a button.

So in other words, the first gesture cannot be a swipe. It must be a tap. Afterwards, enable swiping and all gestures function normally without side effects.

[Zwimber]

Edit: this introduces a new bug which is equally annoying

I have installed 4.8.0, for me only a double swipe resulted in a problem and it was 'easily' resolved with blocking after an initial open:

<ion-menu [swipeGesture]="appMenuSwipeGesture" (ionDidOpen)="appMenuSwipeGesture = false" (ionDidClose)="appMenuSwipeGesture = true">
</ion-menu>

I also set appMenuSwipeGesture = true on ngOnInit.

Good luck!

[hanibhat]

The the snippet below finally worked for me. Like the recommendation above, I had to disable swipeGesture until the menu has been open at least once.

<ion-menu [swipeGesture]="appMenuSwipeGesture" (ionDidOpen)="appMenuSwipeGesture = true">

However, I initialize appMenuSwipeGesture to false.

[joshoconnor89]

Looks like ion-menu-backdrop is blocking ui.

I think were trying to show an ion-menu which hasnt fully initialized yet. Is there any way to detect when the ion-menu exists and is fully initialized? I think this is the solution we need

[mattlewis92]

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 🎉

[Zwimber]

Can confirm that it has been fixed

[Flip32]

I'm using ionic 5.4.1 and this issue still on

[liamdebeasi]

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

[Flip32]

@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

[ToledoNicola]

I had this problem on android with chrome version 72.0 ... and after updating it to the latest version 77.0 ... the menu works correctly

[liamdebeasi]

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]

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!

Yeah man! It worked fine here! tnks

[Mawi137]

I just updated my app as well and I can also confirm that the issue has been resolved. Thanks!
I'll close the issue ;)

[LautaroLorenz]

updated ionic 4.9 to 4.11 and problem was fixed
tested on Android 5.1.1

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