bug: ion-toolbar --background with image flickering

[pieterjandebruyne]

Bug Report

Ionic version: [x] 4.x

Current behavior:

I used the menu starter app with a background image on the ion-toolbar (using the --background var) but on ios navigation it flickers. Using navcontroller or angular router..

Here is a video example: https://streamable.com/ngf7m

Expected behavior: No flickering or an alternative way to add transparent png/svg to the header

Steps to reproduce: 1 Start new project (i used menu because that is what my big app uses) 2 add a background color and image to the background css attribute 3 add some navigation 4 build for ios

Related code: I made the project available on github https://github.com/pieter-janDB/ionic-navbar-flickering Do not forget node_modules / plugins / build for ios (or start new menu project and copy the pages content)

CSS

ion-toolbar{
    --background: red url('/assets/test.svg') repeat;
}

HTML

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="end">
      <ion-menu-button>
        <ion-icon name="menu" slot="icon-only"></ion-icon>
      </ion-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <h1>HOME</h1>
  <ion-button routerLink="/list" routerDirection="forward">Navigate with inline routerlink forward</ion-button>
  <ion-button routerLink="/list" routerDirection="root">Navigate with inline routerlink root</ion-button>
  <ion-button (click)="navigate()">Navigate with this.router.navigate</ion-button>
  <ion-button (click)="navigateByUrl()">Navigate with this.router.navigateByUrl</ion-button>
  <ion-button (click)="navigateForwards()">Navigate with this.navctrl.navigateForwards</ion-button>
  <ion-button (click)="navigateBackwards()">Navigate with this.navctrl.navigateBackwards</ion-button>
  <ion-button (click)="navigateroot()">Navigate with this.navctrl.navigateroot</ion-button>
</ion-content>

TS (all navigation ways I know + the inline in html)

import { Component } from '@angular/core';
import { Router } from "@angular/router";
import { NavController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

   public url = '/list';

  constructor(
    public router: Router,
    public navCtrl: NavController
  ) {}
  ngOnInit(){}
  navigate() {
    this.router.navigate([this.url]);
  }
  navigateForwards() {
    this.navCtrl.navigateForward(this.url);
  }
  navigateBackwards() {
    this.navCtrl.navigateBack(this.url);
  }
  navigateroot() {
    this.navCtrl.navigateRoot(this.url);
  }
  navigateByUrl(){
    this.router.navigateByUrl(this.url);
  }  
}

Other information: I found some other issues with flickering but not only on the header..

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.10.1
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.2, (and 4 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.2.8 

System:

   Android SDK Tools : 26.1.1 (/Users/pieterjandb/Library/Android/sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 8.0.2
   NodeJS            : v10.16.3 (/usr/local/Cellar/node@10/10.16.3/bin/node)
   npm               : 6.11.3
   OS                : macOS Mojave
   Xcode             : Xcode 11.0 Build version 11A420a

[liamdebeasi]

Thanks for the issue. Unfortunately, this is a problem with Safari/WebKit on iOS. The issue should not happen if the image is base64 encoded. I am going to close this as there is nothing actionable on our end as of now. Please see https://bugs.webkit.org/show_bug.cgi?id=195628 for more info.

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