Ionic-framework: v4: ion-menu-button not showing on iOS

[ghost]

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

   ionic (Ionic CLI)          : 4.0.0-rc.10
   Ionic Framework            : @ionic/angular 4.0.0-alpha.10
   @angular-devkit/core       : 0.7.0-rc.1
   @angular-devkit/schematics : 0.7.0-rc.1
   @angular/cli               : 6.0.8
   @ionic/ng-toolkit          : 1.0.0-rc.11
   @ionic/schematics-angular  : 1.0.0-rc.11

Describe the Bug

iOS

Android

Additional Context

https://github.com/ionic-team/ionic/issues/14758
https://github.com/ionic-team/ionic/issues/14757

[ghybs]

Hi,

While there indeed seems to be something wrong with <ion-menu-button>, I could not have it showing up in either iOS or Android (MD mode).
Whereas in your screenshot you do have it in MD mode.

But I see that you have your primary color and toolbar background color set to the same value.
Since by default the toolbar buttons in iOS mode get the primary color, I suspect that in your case the button is there, but you do not see it because it is the same color as the toolbar background:
https://next.plnkr.co/edit/myFz7jTvmMDatwjc
If you change the --ion-toolbar-background-color: orange; CSS rule to red value like --ion-color-primary, the button is now the same color, hence we cannot distinguish it, but it is there.

Notice in your screenshot (iOS) that you also have your top right "+" button and lower left active tab icon "Calendar" not visible, very probably for the exact same reason.

My personal "workaround" is to set the toolbar background color only for Android:
Use CSS variable --ion-toolbar-md-background-color instead of --ion-toolbar-background-color.
Notice that many native iOS app keep their toolbars background with a light color, different from the "main" / primary color.

Hope this helps.

[evertonrobertoauler]

I'm having the same problem using @ionic/angular 4.0.0-beta.11, but I found a working alternative, instead of using ion-menu-button, I'm using the ion-menu-toggle for now:

<ion-header>
  <ion-toolbar [color]="'primary'">
    <ion-buttons slot="start">
      <ion-menu-toggle>
        <ion-button>
          <ion-icon slot="icon-only" name="menu"></ion-icon>
        </ion-button>
      </ion-menu-toggle>
    </ion-buttons>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>

[ghost]

Was fixed in the Ionic 4 beta.

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