bug: collapsible header: main + inactive header does not have a background color

Bug Report

Ionic version:

[x] 5.0.0-dev.202002041730.fbcf48c

Current behavior: When using collapsible headers on iOS, the main header cannot have a a background color when it is in inactive state, because the opacity of its toolbar is set to 0 and the header itself does not have a background-color:

https://github.com/ionic-team/ionic/blob/215d55f1ebeb93988b513c5869faae14d1d51919/core/src/components/header/header.tsx#L106

While this works well when the root --ion-background-color and --ion-toolbar-background are the same color, it prevents from using a different color for toolbars because it will look really strange:

Main header inactive:

Main header active:

Expected behavior: Toolbars in inactive headers can have a background color.

Steps to reproduce:

• clone sample application
• npm i
• ionic serve

Related code: A sample application via GitHub

Ionic info:

Ionic:

   Ionic CLI                     : 6.0.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.0-dev.202002041730.fbcf48c
   @angular-devkit/build-angular : 0.900.0-rc.14
   @angular-devkit/schematics    : 9.0.0-rc.14
   @angular/cli                  : 9.0.0-rc.14
   @ionic/angular-toolkit        : 2.1.2

Utility:

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

System:

   NodeJS : v12.4.0 (/usr/local/bin/node)
   npm    : 6.11.3
   OS     : macOS Catalina

[liamdebeasi]

Glad to hear the issue is resolved! This has been resolved via https://github.com/ionic-team/ionic/pull/20388 and will be available in an upcoming release of Ionic Framework.

[DavidStrausz]

@liamdebeasi Yes perfect, thank you!