bug: menu is not getting correct classes added on open

[brandyscarney]

Reproduced in this issue: ionic-team/ionic-conference-app#226

I was only able to reproduce this using Safari and setting the mode to ios (which is probably because of the menu type being reveal). I reproduced by running the conference app and switching between menu items (usually map -> speakers -> schedule) until the menu was a white screen. It appears the menu isn't getting the show-menu class added sometimes. Adding this class shows the menu content.

[alexbainbridge]

FYI, incase this is lost in the other tickets, this is a new issue in beta 11 / Angular rc4 .... was not present in 10 or earlier.

[JustinPierce]

This sounds a lot like a bug I reported in beta 10 where pages were sometimes not getting the show-page class (#7161). That bug is now closed, as I was never able to come up with a minimal test case for it. I'm currently in the process of upgrading to beta 11, but I haven't had a chance to test on a device to see if it's still an issue.

If it helps any, the workaround I eventually settled on was to manually apply the show-page class in ionViewDidEnter. I tried using the same thing with this bug, but it turns out that ionOpen never fires for the menu when it exhibits this behavior.

[jgw96]

This may be related #7600

[ihadeed]

Any workarounds at the moment?

• A way to force menu style to be md can temporarily fix this
• Or a way to disable the whole iOS theme on my app and use md for all platforms?

[jgw96]

Note to team: cant seem to repro in Chrome or Safari 10, seems that is isolated to safari 9.x.

[alexbainbridge]

@jgw96 I can recreate in Chrome (on Mac). I know saying this isn't too helpful, if you can't recreate with Chrome, but still.

You are in mode IOS yes?

[jgw96]

@alexbainbridge haha no problem, appreciate you taking a look too! Yep im using ios mode with the conference app. Testing in Chrome 52 and safari 10. Are you testing with the same setup?

[alexbainbridge]

@jgw96 Chrome 52 / Safari 9 .... both on Mac (and I can get it to happen both on Safari and Chrome)

[Barryrowe]

I ran into this issue when testing some issues on #7600 I'm adding my notes here:

Initial Reporting of the issue with the side menu:

if the menu is open, and I click on the main page to have it close, it is delayed closing, and then anytime I click on the main page again, the menu drawer is re-opened. Until I use the slide motion to close the menu, all clicks on the page will just toggle the menu.

Confirming in the conference app example:

I just confirmed the menu is broken in the conference app as well. If I am in platformiconic=ios, in chrome. I get the same behavior. When I slide out the menu it slides out fine, but then if I click anywhere, it's a delayed abrupt snap back to closed, and any clicks on the page will cause the menu to open back up. Until I have dragged the menu back to closed from an open position, I cannot click on anything in the main content page.

If I use the menu toggle button during this time, it appears the menu slides too far to the right underneath the content as well..but if I click a couple more times it will toggle "closed" and back open.

I made no modifications to the conference app, I just cloned it, npm installed, and ran

ionic serve --browser chrome

Steps to reproduce in conference app:

I was consistently getting the issue to appear in the conference app. The steps to reproduce the side menu bugged states with the conference app:

1. run the app with parameters ionicplatform=ios in query string
2. use the slide motion to open the side menu (drag from the left of the screen)
3. Click anywhere on the body of the screen (you should notice a stuttered close)
4. Click anywhere on the body of the screen (you should see a non-animated open of the side menu)
5. Until you drag the side menu closed, all clicks on the body of the page will attempt to toggle the side menu
6. After you've dragged the side menu closed, if you click the menu hamburger icon, the side menu panel opens, but the menu content appears to be hidden under the body of the main content leaving a blank white side panel.
7. Clicking the hamburger icon a couple more times appears to get you back to a "normal" state.

More testing, finding that if the UserAgent is correct, it will generally work:

I just tested this in chrome with emulation. It appears that everything works fine with the user-agent emulation. Whether iPad/iPhone or an Android device. I also tested without the header emulation and just using localhost:8100, localhost:8100?ionicplatform=ios, localhost:8100?ionicplatform=android. In all of these 3 scenarios the side menu appears to be broken as stated above.

It appears that something is dependent on the User-Agent headers being picked up and applying some styles/events.

[jgw96]

Thanks @Barryrowe !

[alexbainbridge]

I know you have this in hand, however while we are talking side menus issues in iOS mode, there is this #6405 which I have also seen in 11..... could it be related to this one?

[jgw96]

cc @manucorporat ^ any ideas on that? @alexbainbridge Im pretty sure that is not related but Manu will know more.

[Tiuser4567]

I'm also experiencing 2 issues which seem somewhat related to this.
In Windows, when the menu is opened programmatically at the start. If you close the menu by clicking on any part of the page (i.e backdrop), when you click again on any part of the page (i.e backdrop) it will unexpectedly trigger opening the menu (hence we would be stuck in limbo where we are only able to open and close the menu and not do anything, Unfortunately this can't be replicated via VS studio windows 10 machine. I could only replicate the issue with a Windows Surface tablet with touch)

and Chrome 51 desktop, where show-menu class is sometimes present even if the menu is hidden and sometimes not present when the menu is hidden. (just randomly opening and closing the menu multiple times via the menu toggle in the nav bar and closing it via clicking the backdrop)

(was not able to replicate/verify this in the default plunkr for this as it seems ion-menu functionality does work properly in the default plunkr (?))

[webprofusion-chrisc]

Further to the observations by @Barryrowe I can confirm I see this with my app in Chrome (windows) with the iOS theme, the steps to reproduce currently seem more random for me though (different to those listed above). Manually inspecting the ion-menu element and adding class 'show-menu' then reveals the full menu.

[JustinPierce]

I've been noticing this behavior on Chrome for Windows (v52 and now v53) for quite a while, but in the last day or so, it has gotten to be extremely persistent. It's at the point where the Menu example in the API documentation is failing for me. All I have to do is click the menu button and I get stuck in the crazy menu state.

Since I can't work this way, I tried working around it, and I found that disabling swipeEnabled on the <ion-menu> element allows me to use the menu again. I was led to this when I found that I could remove the menu toggle from my markup entirely and, after doing this, clicking in the upper left corner still caused the menu to try to show.

For reference, I am forcing the menu to type="overlay" due to the other issues currently present in the iOS-style menu. I don't seem to have any issues on devices, so I've only enabled my workaround when not in a Cordova environment.

[manucorporat]

presumably fixed by this PR: #8068