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.

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.

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

having similar issues but with another barcode handheld, also using android 8.1 and latest webview system.

did you find any solution to your issue?

Hi. I have not found a solution. I tried simplifying and simplifying by removing various other tags/constructs in the page with no remedy. It’s a vexing problem. There was another post about problems with controlling the device status bar on Zebra devices. I don’t remember the post. But the gist was that Zebra adds some of their own acceleration to various web view stuff, which doesn’t work properly on some versions of Android. A colleague saw the problem on Android 9 as well. Is such an ugly broken UI. I wish the Ionic folks would step in and help. I’ll keep you posted if I find a solution. Please do the same for me. Thanks — Jason

hey Jason, managed to get the glitches go away with an ugly solution, factory reset the device and disabling automatic updates on play store, keeping Android System Webview and chrome outdated seemed to help. I got reports of my app failling on that device around 25 of may, looks like some system update broke the webview, so for the time being, we’ll have to keep those models outdated.
hope it helps.