iOS right side menu issue (bug ?)

Ionic Framework ionic-v3
1

Hi,

On my Ionic 2 app, I have a left and right side menu. The left one is working perfectly, but I have a weird issue with the right side menu.

When I click on a menu item, the page shows up and the menu closes as expected. But on iOS, when the page slides in, it literally bounces on the left side of the screen. This is my code :

<ion-menu [content]="content" persistent="true" side="right">
<ion-content class="grey-menu">
<ion-item class="menu-header">
</ion-item>
    <ion-list no-lines>
      <button class="grey-menu" menuClose ion-item *ngFor="let page of rightPages" (tap)="openPage(page)">
        {{page.title}}
      </button>
      <button class="grey-menu" menuClose ion-item (tap)="clearCache()"> Nettoyer le cache</button>
    </ion-list>
  </ion-content>
</ion-menu>

In my ts file :

 openPage(page) {
    this.menu.close();
      this.nav.push(page.component, {account: this.account});
  }

I know this strange behavior happens because the page slides in and the menu closes at the same time. If I do this :

openPage(page) {
    this.menu.close();
    setTimeout(() => {
      this.nav.push(page.component, {account: this.account});
    }, 700);
  }

It works perfectly, because the menu is closed before the page appears. Is this a bug ? Is there a way I can solve it ?

Thanks

2

For more information :

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.3
ios-deploy version: 1.9.0 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v6.9.4
Xcode version: Xcode 8.2.1 Build version 8C1002

I had the same issue with Ionic 2.1. I use iOS 10.2.1 but I reproduce the problem in my browser with ā€˜?ionicplatform=ios.ā€™

3

I suppose you could try setting the animation to be backwards instead of forwards, when youā€™re using the menu to the right

this.nav.push(component, params, {direction: "back"});

Or use the Android animation instead

this.nav.push(component, params, {animation: "md-transition"});
4

Thanks, direction: ā€œbackā€ works well. Iā€™ll use it, even if I donā€™t really like this solution and donā€™t understand why it doesnā€™t work as expected with the forward value. It looks like a but to me, and it should be fixed :confused:

5

You could also try closing the menu after the animation has completed

openPage(page, rightMenu = false) {
    if(!rightMenu) this.menu.close();
    this.nav.push(page.component, {account: this.account}).then(() => {
        if(rightMenu) this.menu.close();
    });
}
6

And the behavior is strange with Android and back direction. When I click on the back button, the page shown is entirely blank (is it a bug too ?). If I use this solution, Iā€™ll have to test if the device is Android or iOS, I donā€™t really like that.

Iā€™ll try your second idea, closing the menu after animation, but I donā€™t really like that too, even if the page shows up quickly, it will probably not be as quick as the left menu, which is not user-friendly :confused:

7

Checking platform isnā€™t that big of a deal in my opinion :slight_smile:

if(this.platform.is("ios")) {
    // Do animation backwards
} else {
    // Just do the normal push
}
8

I agree, but this is more a workaround than a real solution to me. This should work as expected without having to check the platform or reverse animation. But Anyway, Iā€™ll use this solution as I canā€™t do it ā€œnormallyā€. Thanks.

1 Like