[Ionic v4] ion-toolbar with opacity doesn't render the correct color

[peterpeterparker]

Ionic Info
@ionic/angular: "4.0.0-beta.2"

Describe the Bug
Setting an --opacity to an ion-toolbar doesn't render the proper cooled. See screenshot white + 0.9 end up being grey

Note: This problem poped with beta.2, was ok in alpha.11 till beta.1

Expected Behavior
A proper rendering of background with opacity on the toolbar

Screenshot

[brandyscarney]

Thanks for the issue! Is the ion-toolbar inside of an ion-footer or another element?

This might be the same issue I am seeing with the conference app when making the toolbar transparent:

cc @manucorporat @camwiegert

[peterpeterparker]

@brandyscarney exactly, the ion-toolbar is inside an ion-footer (sorry for not having posted the code in a first place)

[brandyscarney]

@peterpeterparker Thanks! I also noticed this upon upgrading to beta.2. Added it to the project board to look into!

[manucorporat]

The background color is defined by ion-content, otherwise it's black. It is looking black because there is nothing behind the toolbar.

Use fullscreen in ion-content to expand it under the toolbar:

<ion-content fullscreen>

[peterpeterparker]

@manucorporat sorry that doesn't work, in my example I already have got fullscreen=true

I tried fullscreen instead of fullscreen=true, had no effect, I'm still facing the problem

[peterpeterparker]

@manucorporat finally it took me hours but I was able to reproduce the problem in a starter app but it's really a tricky one to reproduce

I kind of think that it only happens in "sub-pages" (nav.goForward) and only on iOS devices (in my app it happens too on Android but in this starter app I was only able to reproduce the problem on iOS)

How to reproduce the problem

git clone https://github.com/peterpeterparker/ion-toolbar-opacity.git
cd ion-toolbar-opacity
ionic serve
open chrome
open chrome debugger
toggle device toolbar
select iPhone 6/7/8
access http://localhot:8100
click button "Navigate" to access the 2nd page
scroll the all list and observe the color of the footer, from white with opacity it will turns grey

Code

component:

<ion-header>
   <ion-toolbar>
      <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
      </ion-buttons>
      <ion-title>
       SECOND PAGE
     </ion-title>
   </ion-toolbar>
</ion-header>

<ion-content fullscreen="true">
  <ion-list>
     <ion-item>
      <ion-label>Whatever item</ion-label>>
    </ion-item>
  </ion-list>
 </ion-content>
 
<ion-footer>
 <ion-toolbar>
  <ion-button expand="full" shape="round">
     Whatever action
   </ion-button>
  </ion-toolbar>
</ion-footer>

scss

ion-toolbar {
   --background: white;
   --opacity: 0.9;
}

Video

Demo of the issue:

https://www.dropbox.com/s/kelx7j0sgu7iuu8/toolbar-opacity.mov?dl=0