BUG: ion-menu is transparent in some devices

Hello friends first of all sorry for my english I dont speak very well. I have a APP runing with ionic, the versions are IONIC: 5, Capacitor 3 and Angular 11.

It was runing fine before but today my menu is transparent on the device, when I inspect from chrome is visible there.

Anyone had this problem before?

Here is the HTML Code of my layout:

<ion-split-pane contentId="main-content-app">
  <ion-menu contentId="main-content-app" type="overlay">
    <ion-header>
      <ion-toolbar color="tertiary">
        <ion-title>Estoque Fácil</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-item routerLink="/app/home" routerLinkActive="active" routerDirection="root">
          <ion-icon name="home-outline"></ion-icon>
          Home
        </ion-item>
        <ion-item routerLink="/app/balanco" routerLinkActive="active" routerDirection="root">
          <ion-icon name="pricetags-outline"></ion-icon>
          Balanço
        </ion-item>
        <ion-item routerLink="/app/configuracoes" routerLinkActive="active" routerDirection="root">
          <ion-icon name="settings-outline"></ion-icon>
          Configurações
        </ion-item>
        <ion-item (click)="logOff()">
          <ion-icon name="log-out-outline"></ion-icon>
          Sair
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>
  <ion-router-outlet id="main-content-app"></ion-router-outlet>
</ion-split-pane>

Print Screen of the phone and inpect tab:

UPDATE:
When I Have only 3 items on the menu it works perfect.

UPDATE 2:
When i remove the icons it works with more than 3 items, I will leave without icons for the moment

Looks slightly similar (though not the same) to the issue we have been having recently on Android 8.1 devices when they have updated the latest version of Chrome.

change the name of all three icons to “mail-outline” - does that solve your issue (asking because of the issue I am having with icons on some devices)

Did you try my suggestion, it would be handy to see if you are seeing the same error that I’m seeing?

Hello Richard, Sorry i just saw your reply today, I didn´t try, my temporarily solution was to change every icon from ion to material, its not perfect because u cant use mat-icons on ion components such as Toastr or Action Sheet. I hope it get fixes on the future!

What device and o/s version are you using?

Its a china PDA running android 8.1

Ok I expect that’s the same issue as we are having (which occurred on Android 8.1 devices after the recent Chrome update)

Yes i think so, I have 4 of this devices, first 2 presented the error in the next day the other 2.

I saw that u opened a bug for chrome! Thanks

1 Like

A problem was occurring in our applications, same scenario in Android 8.1, I noticed that all the errors were occurring in the <ion-toolbar>, several different errors occur in the component depending on the context.

When implemented, it generates a <div> child tag with the class “toolbar-background-md” when using Material Design, that’s where the problem occurs.

snippet(html):

<ion-toolbar class="toolbar toolbar-md toolbar-md-secondary" mode="md" ng-reflect-color="secondary" ng-reflect-mode="md"><div class="toolbar-background toolbar-background-md" ng-reflect-klass="toolbar-background" ng-reflect-ng-class="toolbar-background-md"></div>

I found a temporary solution to the error. To prevent resizing and undue action from occurring, I forced a border in the CSS of this <div> tag.

solution(CSS):

.toolbarCustom{ 
div.toolbar-background-md{ 
border: 1px solid color($colors, secondary);

  } 
} 

This solved the problem so far.
I hope I have helped.

In the picture:
On the left is the Bug on Android 8.1, and on the right is the bug fixed :smiley:!