Ionic 4 "translucent" headers not working?

[jrista]

I have been trying for a while to get the new translucent (i.e. backdrop-filter based blur) header feature to work in Ionic 4. I have verified that backdrop-filter does indeed work, both on the desktop in Chrome as well as on devices, as I have used it myself in other custom CSS styling of other parts of my ui. However the header feature does not seem to work.

I have my pages set up using translucent on the header and fullscreen on the content, as per the documentation for ionic 4:

<ion-header translucent>
  <ion-toolbar>
    <ion-buttons slot="start" *ngIf="authorities.current$ | async">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>
      <img src="assets/images/img_main.png" alt="">
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen>

I have also tried tweaking some of the ionic standard styles, to make certain elements in ionic transparent (as recommended by other threads on various forums on this subject) but to no avail:

:host {
  ion-header {
    ion-toolbar {
      --background-color: transparent;
      --ion-color-base: transparent !important;
    }
  }

  ion-button {
    --background: var(--dark-red);
    --background-activated: var(--darker-red);
    --background-focused: var(--dark-red);
    --background-hover: var(--dark-red);
  }
}

There was a single, short period of time where suddenly the tranclucent header started to work when testing the app in the browser on my desktop. However when it worked, the z-layering appeared to get screwed up as well. I mentioned I had my own custom styles with backdrop-filter configured with similar blurring (blur(20) actually, same as I believe the header is supposed to be using). So while most of the page contents was properly scrolling under the header and the translucency effect was working, all of my own elements styled with backdrop-filter scrolled OVER the header, obscuring it. Interestingly, when my backdrop-filtered elements were on top of the header, they were properly blurring the page contents…but the header was being completely ignored.

I do not know what happened to cause this strange coincidental quirky behavior, but it was the only time I’ve ever seen the ionic 4 translucent header effect actually work. Considering that there seemed to be a z-index problem at the time, I wonder if the default ionic 4 styles for the header may have a z-indexing problem? In any case, the design of the app I am working on was heavily contingent on these translucency effects, and we are really hoping there is a solution to the problem. Any insight would be greatly appreciated.

[mhartington]

How are you testing this? The translucent header is only enabled when deployed to iOS or mocking iOS user agent. This is because only iOS has this look and feel.

[jrista]

Hi Mike,

I was testing it on an iPhone 8 with the latest iOS. I also tested in the browser with iOS user agent. I think something must have happened when I prepared cordova and built the ios native app. I scrapped all of it and just kept my angular/ionic code, then started again from scratch. That got it working on the iPhone 8.

I chatted a bit with Ely on Twitter and he noted that after switching to iOS mocking in Chrome, I had to reload the whole app to get it to properly detect. I wasn’t doing that before, now that I am I am seeing the translucency in Chrome/Opera now as well.

[jrista]

Quick update. It appears one of the key areas where I have lost the translucency effect is ion-modals with custom classes. I’ve used some custom classes for a few different modals, to set different background colors. I am using --background to set the background color of the modal, which I think may be killing the translucency of the header:

.modal-error {
  --background: var(--moderate-red);
  --color: var(--white);
  --button-color: var(--white);
}

I fiddled with the styles once and somewhere along the line I managed to undo whatever was happening, and I could see the large white text from the screenshot below blurring behind the header. So, it appears that the backdrop-filter is in place…but something seems to be obscuring the actual ion-content area when it scrolls under the header:

The backdrop filters definitely work, as I am also using them in the panel in the middle of the screen above to blur the background. So I don’t think it is a browser support issue.

Is the use of an ion-modal custom class causing styles to be set on the translucent header as well? Should I be using different Ionic variables to properly set the background color of my modals so as not to kill the translucency of the header?