search

ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
50.47k stars 13.53k forks source link

bug: ion-header with collapse="fade" displays background and border temporally #29411

Closed cperezabo closed 2 weeks ago

cperezabo commented 2 weeks ago

Prerequisites

Ionic Framework Version

v7.x (It happens in v8.x as you can see in the StackBlitz example I provide)

Current Behavior

When a page loads, the background and border of the header show and disappear. Same happens during navigation transition.

https://github.com/ionic-team/ionic-framework/assets/3604722/9c61a8cb-e176-4fea-88b9-22a09f8e5b19

And when opening a modal, it just gets translucent

https://github.com/ionic-team/ionic-framework/assets/3604722/b0e5ca25-a469-4296-adf1-180c25ea34d4

Expected Behavior

ion-header should be transparent since scrollY is 0. When modal shows, it should keep the background color of the page (white in this case).

Steps to Reproduce

Press the Navigate button in the StackBlitz example to see how the background shows and hides. Press the Show Modal button to show how the background becomes translucent incorrectly.

Code Reproduction URL

https://stackblitz.com/edit/angular-gxv8gk

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/Users/cristian/.config/yarn/global/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 7.6.6 @angular-devkit/build-angular : 17.1.1 @angular-devkit/schematics : 16.2.8 @angular/cli : 17.1.1 @ionic/angular-toolkit : 10.0.0

Utility:

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

System:

NodeJS : v20.11.0 (/Users/cristian/.asdf/installs/nodejs/20.11.0/bin/node) npm : 10.2.4 OS : macOS Unknown

Additional Information

No response

liamdebeasi commented 2 weeks ago

Thanks for the issue. I am going to close this as a duplicate of https://github.com/ionic-team/ionic-framework/issues/25326.