Side menu toolbar header overpainted by WHITE

I am experiencing a very strange visual artifact when using an ion-menu in overlay mode on some of my screens. The ion menu content is declared to have a toolbar in the header with color=“primary”. It also has a close box button to retract it.

CORRECT RENDERING

The first screen shot shows the side menu rendered correctly, with the main content being overlaid.

tc70x-white-overview-menu-correct428×732 37.5 KB

INCORRECT RENDERING

The second screen shows shows the header of the side menu and the overlaid content overpainted with WHITE. This overpainting occurs as soon as the drag ends and the menu is fully extended. If I drag the menu to close it, while dragging, the rendering is correct! I am vexed by this problem.

tc70x-white-overview-menu720×1280 36.6 KB

I am only seeing this on Zebra devices running Android 8.1.1. There is no problem in Android emulator.

Here is the code:

<ion-header>
    <ion-toolbar color="primary">
        <ion-title>{{'OVERVIEW_TITLE' | translate}}</ion-title>

        <ion-buttons slot="start">
            <ion-menu-button
                    autoHide="false"
                    menu="left_menu"
            ></ion-menu-button>
        </ion-buttons>

        <ion-buttons slot="end">
            <ion-button (click)="gotoPackageList()">
                {{'PACKAGES' | translate}}
            </ion-button>
        </ion-buttons>

    </ion-toolbar>
</ion-header>

<ion-content #overview_content class="ion-no-padding">
...
MAIN SCREEN CONTENT HERE
</ion-content>

<ion-menu
      side="start"
      type="overlay"
      menuId="left_menu"
      swipeGesture="true"
      contentId="left_menu_content"

>
  <ion-header>
      <ion-toolbar color="primary">
          <ion-title></ion-title>
          <ion-buttons slot="start">
              <ion-button (click)="closeMenu()">
                  <ion-icon name="close-sharp"></ion-icon>
              </ion-button>
          </ion-buttons>
      </ion-toolbar>
  </ion-header>

  <ion-content id="left_menu_content" class="clickable">
      <ion-list class="ion-no-padding">
      ...
      </ion-list>
      </ion-content>
</ion-menu>
    

Ionic:

   Ionic CLI                     : 6.12.4 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.5.2
   @angular-devkit/build-angular : 0.1100.7
   @angular-devkit/schematics    : 11.0.7
   @angular/cli                  : 11.0.7
   @ionic/angular-toolkit        : 3.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0, ios 6.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 21 other plugins)

Utility:

   cordova-res (update available: 0.15.3) : 0.5.2
   native-run (update available: 1.3.0)   : 1.0.0

System:

   ios-deploy : 1.9.2
   ios-sim    : 8.0.2
   NodeJS     : v10.16.3 (/usr/local/bin/node)
   npm        : 6.14.9
   OS         : macOS Catalina
   Xcode      : Xcode 12.4 Build version 12D4e

1 post - 1 participant

Read full topic