Ionic-framework: bug: ion-menu is not visible after page transition on iOS

[kyleabens]

Bug Report

Ionic version:


[x] 4.10

Current behavior:

When you open ion-menu and navigate to a page and then go back the menu is no longer visible but if you click anywhere on the screen it then reappears and closes immediately. This only occurs on iOS.

Expected behavior:

The menu should be visible after opening it and navigating to a page and back.

Steps to reproduce:

Create an Ionic app with the iOS platform and add an ion-menu that includes an ion-item that uses routerLink to navigate to another page. Then click an ion-back-button.

Other information:

This only occurs on iOS and I believe this began with with version 4.8 or 4.9.

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.10.0
   @angular-devkit/build-angular : 0.802.1
   @angular-devkit/schematics    : 8.2.1
   @angular/cli                  : 8.2.1
   @ionic/angular-toolkit        : 2.0.0

Capacitor:

   Capacitor CLI   : 1.2.1
   @capacitor/core : 1.2.1

Cordova:

   Cordova CLI       : 8.1.2 ([email protected])
   Cordova Platforms : not available
   Cordova Plugins   : not available

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   ios-deploy : 2.0.0
   NodeJS     : v10.15.0 (/usr/local/bin/node)
   npm        : 6.11.3
   OS         : macOS Mojave
   Xcode      : Xcode 11.0 Build version 11A420a

[liamdebeasi]

Thanks for the issue. Can you provide a repo with the code required to reproduce this issue?

[tomaszDziedzic2]

Hey, I am experiencing similar issue. I have two side menus and after a while they begin to behave crazy. Eg. menu opens for a moment and then disappears, or is not available at all. This occurs on IOS only. Downgrading to 4.6.1 seems to solve this, but thats not an option for me.

[kleeb]

the same for me, 2 ion-menus are super buggy on iOS, Ionic 4.10.0

[kyleabens]

I tested the side menu on an iphone 11 and was unable to reproduce the issue. So far this only appears on my iphone X. Not sure if that helps but wanted to point it out.

[kleeb]

Even on PWA it works wrong on any iPhone devices.
Try yourself on iOS Safari: https://adam.app.andrzej-ondra.botyourself.net

[kleeb]

The very last Ionic version where our apps are not affected is 4.8.1

[liamdebeasi]

Can you provide a repo with the code required to reproduce this issue? I am unable to reproduce the issue using the demo site you provided.

[kleeb]

Sure, I will try to prepare some MVP.

[kleeb]

We found the issue. It was on our side, but would be great to secure such case with a default fallback:

[liamdebeasi]

Glad that your issue is resolved. It looks like you are passing in "undefined" as a string which may be why the default fallback is not being applied.

@kyleabens Are you still able to reproduce this issue? If so, do you have a code reproduction I can use to see this bug in action?

[kyleabens]

@liamdebeasi I can only reproduce the issue surrounding ion-menu on an iPhone X. Every other device works fine so I’m not going to waste anymore time on it. Thanks!

[kleeb]

I managed to finally find the cause: it happens when you have 2 menus with default types. If one of them is set as type="push" (like in docs example https://ionicframework.com/docs/api/menu) it works properly.

Reproduction steps: iOS device (webapp or native) or iOS simulator

1. swipe open left menu
2. navigate to different page
3. try to swipe open right menu, its impossible to open

Here you go https://github.com/kleeb/ionic-issue-19500
Video: https://drive.google.com/open?id=1K8ufJulCBTqxsgWo7FK5_t5FyFuSGc_8

[kleeb]

@kyleabens @liamdebeasi
are you planning to check this out ?

[liamdebeasi]

Hi there,

I am not able to reproduce the behavior you are describing on an iOS device using the provided repo. Additionally, I do not have permission to view the video you have posted. Can you verify the reproduction as well as the video permissions?

[kleeb]

@liamdebeasi sorry, now its public
pls check

[piotrbz]

@liamdebeasi sorry, now its public
pls check
@kleeb
it looks like problem with swipe is resolved by you i cannot reproduce problem after your fix

[liamdebeasi]

@kleeb Thanks for the follow up. I still cannot reproduce this issue. What version of iOS are you seeing this on?

[kleeb]

definitely on the iOS 12.1, but I think our QA also reproduced that on 13

[kleeb]

currently its not a showstopper anymore, as we started using push type for the right menu, but if its like that would be nice to add such info in the docs, so that other devs are not wasting time on trying to fix such a hard-to-guess-what bug

[liamdebeasi]

Yeah I definitely understand that. Unfortunately we're not really able to document/fix much if we can't reproduce it. If you manage to find a more consistent way to reproduce the issue, feel free to open a new issue and I can take a look. 🙂

[kleeb]

I think I did everything I could - created a repo based on your sample project, added a video, reproduced on simulator, and independently our QA also reproduced that on a device. Have you followed exactly what I did in the sample video?

[tomaszDziedzic2]

I used repository provided by kleeb, run project and opened it externally (iphone6, ios 12.3.1) and Im experiencing the same issue. Steps to reproduce:

1. Open left side menu with button
2. Select list
3. try to swipe open right side menu
4. menus start to behave strange

Sometimes it takes longer to reproduce it - please try to open items from left menu, then right menu and left menu again. After a few attempts you will surely see the buggy behaviour.

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