bug: collapsible large title background styling

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

I’m struggling for a while with collapsible large title and background styling now. I first though it would be only in relation with refresher: #23951 but it also is without.

Please the the attached Video from a native App (with Refresher but should be similar without):

https://user-images.githubusercontent.com/20899975/135641890-228ed15d-8b4f-4619-9eed-21e1519fe2b4.MOV

I want to be able to have a complete background colored header (including the large title). If i scroll down (where the refresher comes up or if there is no one, the title gets a small step bigger) the background should be in the same color.

Currently when creating a nearly similar look by setting the color on the main toolbar directly, there comes up this gap:

Expected Behavior

I think we have to decide if we want show the content above the header in expanded state. I saw many native apps that look like the video above and i really like this look 😃

In that case the opacity should not be set to 0 and the gap has to be filled somehow 🤔

Steps to Reproduce

I guess no reproduction is needed here and this is more kind of a discussion ticket if such a functionality should find it way into the framework (i hope so) 😃

Code Reproduction URL

No response

Ionic Info

No response

Additional Information

No response

[EinfachHans]

<ion-header translucent="true">
  <ion-toolbar style="background: #3880ff">
    <ion-title>Pull To Refresh</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen="true">
   <ion-header collapse="condense">
     <ion-toolbar color="primary">
       <ion-title size="large">Pull To Refresh</ion-title>
     </ion-toolbar>
   </ion-header>
  ...
</ion-content>

results in

thats why i target the main header and add

.custom-header.header-collapse-condense-inactive {
  ion-toolbar {
    background: var(--ion-color-primary)
  }
}

what results in this:

This has the shown gap but works with the translucent effect

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