ionic-framework: bug: div toolbar-title created by shadow root overwrites header z-index, causing graphical error

Bug Report

Ionic version: [x] 5.22.0

Current behavior: When using an ion-toolbar within an ion-header, using an ion-title sets the ion-toolbar’s title. This causes the shadow root to apply a <div class="toolbar-title"> element. This element inherits the base z-index of 10, and is not overwritten by changing the z-index of the header, toolbar, or title. This leads to a strange graphical glitch where part of the header looks like it is at a different z-index from the rest.

Expected behavior: The z-index should match the z-index of the parent elements.

Steps to reproduce and related code: Using the following html:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Test
    </ion-title>
  </ion-toolbar>
</ion-header>

and the following css class:

.z-change {
  z-index: 0;
}

Applying the “z-change” class to the ion-header, ion-toolbar, ion-title, or any combination of the above results in the aforementioned graphical issue, where part of the header is z-index 0 and part is z-index 10.

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.16 (C:\Users\Austin\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.11.10
   @angular-devkit/build-angular : 0.803.22
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : none
   Cordova Plugins   : no whitelisted plugins (0 plugins total)

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v10.16.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.9.0
   OS     : Windows 10

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 16 (6 by maintainers)

Most upvoted comments

Adding that does seem to cause the desired behavior, thank you!

I was under the impression that that background image in the ::after was conditional on the z-score, but I guess that was a faulty assumption on my part. Thanks for your help, I’ll close the issue.

atlowell-smpl on Apr 15, 2020

Thanks for the follow up. When running in MD mode, we do apply a background-image to the ::after pseudo element for ion-header to give it a divider/drop shadow effect. Rendering an actual box-shadow is a bit less performant than rendering an image, so we just render a background image instead.

In order to get rid of the divider, you can just do:

ion-header::after {
  content: initial !important;
}

This should be done instead of altering the z-index values. Does this resolve your issue?

liamdebeasi on Apr 15, 2020