ion-back-button and ion-menu-toggle not visible on iOS

[simonhaenisch]

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI) : 4.1.2

System:

   NodeJS : v8.11.4
   npm    : 6.4.1
   OS     : macOS High Sierra

Packaged Versions

{
  "@ionic/core": "4.0.0-beta.8",
  "@stencil/core": "0.12.4"
}

Describe the Bug

The ion-back-button doesn't show the icon on iOS.

Steps to Reproduce

1. Create and run an Ionic PWA Stencil project:

npx create-stencil ionic-pwa
npm i -D -E @capacitor/cli @capacitor/core
npx cap init <name> <app-id>
npx cap add ios
npx cap add android

npm start

2. Change the emulated device in Chrome dev tools to an iOS device and reload.
3. Switch to the profile route.
4. The button exists (can be clicked and inspected) but the icon is invisible.

Related Code

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/" />
    </ion-buttons>
    <ion-title>Profile: {this.name}</ion-title>
  </ion-toolbar>
</ion-header>

Expected Behavior

The icon should be visible.

Additional Context

Adding mode="md" to the ion-back-button component kind of fixes it: on iOS it actually shows the proper iOS back icon (chevron), not the Android back icon (arrow). However as I understand setting mode to md should also change the icon to the Android icon? The only way of forcing it to use the Android Icon is to run setupConfig({ mode: 'md' }).

[simonhaenisch]

Edit: this happens as well for <ion-menu-button /> but not for normal icon buttons.

[cthos]

Can confirm I'm seeing this issue as well.

I think this is related to there being a

.sc-ion-back-button-ios-h {
  color: var(--ion-color-base);
}

Somewhere, which is making the color match the background?

I tossed a

.sc-ion-back-button-ios-h {
  color: white;
}

in my global.scss and it seems to be back?

[charlesj1]

+1

[giacomocerquone]

Well, I think this is related to #15436
To me isn't just a problem related to the display none property. If I set it visible, it behaves randomly where most of the times it doesn't work

[paulstelzer]

I have added a PR -> #15847

They have fixed the back-button few weeks ago, but not the menu-button. I just fixed the problem with the color, but they have to add a lot of more css variables like they did at the back-button. So I don't know if they merge it or if they fix the whole menu-button soon

[giacomocerquone]

Thank you very much. I wanted to link the issues in order to close both once the fix has been merged. Anyway I'll look into the source code to try to solve these problems asap since I've to deliver an app for the fifteenth of November

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