bug: menu is not getting correct classes added on open

Reproduced in this issue: https://github.com/driftyco/ionic-conference-app/issues/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.

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

[manucorporat]

presumably fixed by this PR: https://github.com/driftyco/ionic/pull/8068