Ionic-framework: Side Menu Close Delay iOS and Ionic View

[alfredoeflores]

Short description of the problem:

Side menu closes with a delay, or doesn't close if you tap the menu button immediately after you open the menu.

What behavior are you expecting?

When creating an app with the sidemenu template and using Ionic View, the menu is supposed to toggle using the button on the top left corner. The menu opens when you press the button, as expected, but if you immediately tap the button again, the menu won't close. It'll only close if you wait a second before pressing it again. If you do wait and tap the button after a second or two, the menu will close but with a 1000ms approximate delay. This happens while testing the app using Ionic View.

Steps to reproduce:

1. Press menu button (top left corner) to open menu.
2. Immediately press the button again. The menu won't close.
3. Press the button again and the menu will close, but with a noticeable delay.

This happens when I create an app using the sidemenu template:

ionic start SideMenuTest sidemenu --v2 --ts

Other information:
This has been checked in two iPhone 5 devices, both with iOS 9.
I've created an app with ID f3e5ddce, so you can see the issue.

Which Ionic Version?
Using Ionic 2.0.0-beta.25

Run ionic info from terminal/cmd prompt:
Your system information:

Cordova CLI: 5.1.1
Gulp version: CLI version 3.9.0
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.7
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
ios-deploy version: Not installed
ios-sim version: 3.1.1
OS: Mac OS X Mavericks
Node Version: v4.4.5
Xcode version: Xcode 6.2 Build version 6C131e

---

Dependency warning - for the CLI to run correctly,
it is highly recommended to install/upgrade the following:

Install ios-deploy to deploy iOS applications to devices. npm install -g ios-deploy (may require sudo)

---

[AbrahamLopez10]

We're experiencing this as well on Ionic 2 beta 7, using an iPhone 5S (quite fast), on a very basic app.

There's also ANOTHER ISSUE: A bug that causes the sidemenu icon and it's inner items to require a double (or sometimes triple) tap in order for the sidemenu to open or the items to open the corresponding view. This doesn't happen when using the swipe gesture, though.

Only when tapping the "sidemenu icon". When using the swipe gesture the sidemenu opens/closes normally and sidemenu items react with a single tap, albeit with an aprox. 500ms delay in opening the corresponding views, which is related to the original issue reported.

However, why was this issue closed? The problem persists, and just saying "this will get better in the future" doesn't help at all. Having a simple UI component like the side menu being slower than in a previous Ionic version is just going backwards.

What's the underlying cause of this issue actually? It doesn't make sense that the sidemenu is slower on this new version and fast on Ionic 1. If you could give more info on the reason of this slowness perhaps we could help fixing it using a PR.

Or will this be fixed on the next beta?

[lukezbikowski]

Same here,
I also try to add 'close button' staying on left edge of content view - to see if it's 'header specific'...
the same behaviour (close button is laggy and slow, needs to be clicked few times to react).

Any plans to fix that ?
It's quite disturbing issue for iOS as affects the overall 'feel'...

Any workaround ?

Also, please let me know if I can help somehow. Thanks for amazing work with ionic.

[numerized]

Hi guys, thanks for amazing work and conference app !!!

I'm experiencing the same issue mentioned here. I have to add to it that I just formatted my phone and installed the conference app almost instantly.

The swipe to open and close is working well though.

If you need any info, please ask me.
Thanks @alfredoeflores for this bug report

[AbrahamLopez10]

Ionic team, please fix this for the next beta! It's a MAJOR bug that need to be squashed.

[jgw96]

Hello all, does this only happen on Ionic View or does it also happen on a device? Thanks for using Ionic!

[AbrahamLopez10]

I've only tried it with Ionic View at the moment, which is where I noticed it. @alfredoeflores, @numerized and @lukegaluszka can you please indicate if you've reproduced the issue in an actual installed app?

[lukezbikowski]

As per my observations - It happens ONLY on the device and simulator,
I have tried with Chrome & Safari @Desktop but it's working fine...

[numerized]

Hi guys,

In my end it happens within an actual app on iphone6 totally formatted device.

https://github.com/driftyco/ionic-conference-app is doing it without message in the xcode console.

No problem in the browser so far.

[lukezbikowski]

I have found 20-30 mins to play with that today.

I tried to create 'close' button inside of the menu and it works perfectly fine. On the 2nd look it seems that the menu-button (the one in header) is 'laggy' intentionally ?

I haven't check the ionic code for that, but does it have some sort of 'cover' protecting from taping 'half-hidden' content... ?

If that won't get solved until the weekend I will try to find few minutes to debug the actual code and find out why.

Thanks for looking into this...

[AbrahamLopez10]

Thank you Luke. What seems interesting is that this "cover" only causes the
lag on mobile Safari, but not on the Chrome webview for Android (v4.4+) nor
on desktop browsers like Chrome or Safari.

On Wed, Jul 27, 2016 at 7:07 AM, Luke Zbikowski [email protected]
wrote:

I have found 20-30 mins to play with that today.

I have tried to create 'close' button in the menu and it works perfectly
fine. So the problem is that the Menu-button in header is 'laggy'
intentionally ?

I haven't check the ionic code yet for that, but It seems like it's caused
by some sort of 'cover' protecting from taping 'half-hidden' content... ?

If that won't get solved until the weekend I will try to find few minutes
to debug the actual code and find out why.

Thanks for looking into this...

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/driftyco/ionic/issues/6645#issuecomment-235565784,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AKDHSIQeCVvVQnAiQxmIgvopq5INxLJzks5qZ0nvgaJpZM4Il724
.

[jgw96]

Hello all! After reviewing this issue i cant seem to reproduce this on my iphone 5 or an ipad. @lukezbikowski is correct that there is a "cover" that prevents users from tapping content that has not finished animating yet, and this seems to be working correctly. I am going to be looking more into this though. Can everyone confirm that they are using the latest ionic 2 release? (beta.10)? Also if anyone gets a chance feel free to give the latest nightly a try by running npm install ionic-angular@nightly and see if that fixes the issue for you. Thanks for using Ionic!

[lukezbikowski]

Thanks @jgw96, The 'cover' is of course 'conceptual' - I am talking behaviour here of course. From quick look that could be related to prevent+delay but no strong data here [just guessing]. I will test beta@10 tonight (Sydney time ;-) ) and let you know.

If not solved I will post some gif here and debug myself to provide you some more details.

Thanks for your help with that and great work on Ionic!

[alfredoeflores]

Thanks, @jgw96. I can confirm we're using the latest Ionic 2 release (Beta 10) and the issue persists.

[lukezbikowski]

Sorry for late update. I confirmed on Beta10 as well (problem persist). Unfortunately I didn't have a chance to look further yet.

[alfredoeflores]

Just tested the app on an actual device (iPhone 5), and the problem is there as well. So I can also confirm it's not just an Ionic View issue.

Thanks for looking into this!

[lukezbikowski]

I have tested the new beta11. The problem does not occur anymore.
Tested on iPhone6plus.
In my opinion this one can be closed.

[jgw96]

Hello! Thanks for testing @lukezbikowski ! I will be closing this issue for now, but if someone else still has the issue feel free to comment and i will happily reopen!

[alfredoeflores]

Hi! I just tested the menu with Beta 11. The problem persists in both Ionic View and installed as an actual app. /:

[alfredoeflores]

For reference, the app I'm testing has id 59cdccad. Tested it in both Ionic View and device (iPhone 5).

[AbrahamLopez10]

I'm still experiencing this issue as well on beta 11, please REOPEN this issue.

[AbrahamLopez10]

Hi guys! Do you've any info on this issue? As reported previously, both me and the user alfredoeflores are still experiencing the bug on beta 11. Thanks in advance.

[jgw96]

Hello! We are tracking sidemenu issues with beta.11 in this issue. Thanks for using Ionic!

[AbrahamLopez10]

Why this issue and issue #6405 have been closed when they clearly have not yet been fixed? (just wondering :/)

[guanxi55nba]

I am on beta 11 and also experiences this issue.
It happened on IOS, both emulator, and device ( iphone 5s )

[numerized]

In my end is still not fixed,

the way to fix it for now is to switch my app to

mode: 'md',

ionicBootstrap(MyApp, [provideCloud(cloudSettings)], {
  mode: 'md',
  backButtonText: 'Back',
  iconMode: 'md',
  modalEnter: 'modal-md-slide-in',
  modalLeave: 'modal-md-slide-out',
  pageTransition: 'md-transition',
  pageTransitionDelay: 120,
  tabsPlacement: 'bottom'
});

[manucorporat]

Fixed 9bbe485

[ridwan85]

Changing the menu type to overlay solved it for me.

<ion-menu [content]="content" type="overlay">
</ion-menu>

[numerized]

Issue is stil ON guys, I've tested it on IOS, @manucorporat split pane ON.
Manu join chat on slack I'm Emoviser we can kill this bug forever and more.

[numerized]

@ridwan85 workaround has been adopted here meanwhile.

[eheading]

I found the problem still exists, I am using the latest version of ionic/angular. When I open the menu by clicking the menu icon, it can only be closed by swipe back immediately. But if you want to close it by clicking the menu icon again or click content area to close, you need to wait around few seconds first, otherwise, the close menu event can't be fired.

Type="overlay" can solve the close problem, but the animated effect is not good as "reveal" type. May I know is there any solution for solving this? Thanks.

[doncadavona]

Got the issue too on a fresh ionic start myApp sidemenu --v2. Delay occurs when tapping only. Swiping is ok. In v1, both tapping and swiping has no problem. Tested in iOS Ionic View app in iPhone 6s.

[drptbl]

@manucorporat still not fixed in 3.1.1. Having same issue as described above.

[StevenLiSiwei]

it is not fixed in 3.1.0. Having same issue here on ipod touch and iphone 6. no issue on desktop chrome.

[znegva]

Still present with ionic 3.3.0 ( Cordova 7.0.1, iPhone7)
(ion-menu inside of ion-split-pane)

Setting type of ion-menu to "overlay" is working (around the problem).

[mbakker96]

Problem still exist. When I start a new app with ionic start myApp sidemenu and then I push on the menu icon so that the menu opens. But then when I press on the screen (right of the menu bar) then it has a delay of a few seconds before it triggers the close function.

This is everywhere I use an animation. I have somewhere in my app where I adjust the height of a div and when I trigger that the app is unresponsive for a few seconds.

The problem is only when running natively on IOS

[dev-manager-uk]

@jgw96 we are still getting this issue too - is there a fix planned? Thanks :)

[josueadelima]

Why this is closed if its not fixed?

[javierlopeza]

Still getting this issue here...

[mihaistana]

The issue its still here

[benermafield]

I am also still experiencing this issue.

However I noticed today that when the side menu is opened using type="push", and as such pushes the main content to the side, leaving the hamburger button still visible. It is not the hamburger button itself that is being clicked when we try to close the side menu, but the <ion-nav> element.

I confirmed this by removing the Event Listener on the right hand panel in Chrome Dev-Tools and then trying to close the side menu by clicking anywhere outside of the side menu and seeing that it wouldn't close.

As such, I am guessing (but have yet to try and confirm) that this issue is related to the tappable attribute issue others have documented experiencing on iOS, where click handlers have been bound to elements other than <button> and <a> and have either required clicking twice, or have had 300ms+ delays on clicking the element.

[dev-manager-uk]

If this issue is now closed, will our updates be ignored?

Should we create a new issue?

[dev-manager-uk]

ok, I've made videos of the bug:

Video of it broken on iOS app: https://vimeo.com/233666752
Video of it working in Ionic View: https://vimeo.com/233666803

If others are still getting this issue please add a comment to a new _open_ issue at:
https://github.com/ionic-team/ionic/issues/12881

[kensodemann]

I duplicated the issue using the sidenav starter and then I installed the WKWebView plugin and the problem went away. If you are not alread using WKWebView, please give that a try and see if it resolves the issue for you.

[dev-manager-uk]

Thanks for your help Ken
I have replied in the open issue at https://github.com/ionic-team/ionic/issues/12881

[radulescuandrew]

Use (click) in conjunction with tappable directive.

<ion-item menuClose (click)="doSomething()" tappable>

[RoydenTJames]

I had the same issue with this in Ionic 1. My work around is to place the following code on all the pages that are accessible from the menu. By doing this it closes the menu almost instantaneously. A little annoying that you have to do it for each page, but the alternative wasn't working for me at all.

$scope.$on('$ionicView.beforeEnter', function (e) {
$ionicSideMenuDelegate.toggleLeft(false);
});

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