ionic-framework: 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

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 16 (15 by maintainers)

Most upvoted comments

<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

Bildschirmfoto 2021-10-07 um 15 43 57

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:

Bildschirmfoto 2021-10-07 um 12 58 57

This has the shown gap but works with the translucent effect

EinfachHans on Oct 7, 2021