bug(ion-header): applying box-shadow leads to laggy back navigation animation

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

if the box-shadow is added to ion-header, the back navigation is laggy. The same behavior applies when box-shadow is applied to ion-toolbar.

https://user-images.githubusercontent.com/26873275/163140132-36d76ba9-e1f3-423c-ab23-c7b311122670.mov

Expected Behavior

there should be no lag if you navigate back using box-shadow.

Steps to Reproduce

apply global styling for ion-header inside global.scss:

ion-header {
  box-shadow: 0 0 10px 0 rgba(var(--ion-color-dark-rgb), 0.4);
}

Now just navigate back and forward.

The current “workaround” is to use instead of box-shadow, the filter property:

ion-header {
  filter: drop-shadow(0 0 10px rgba(var(--ion-color-dark-rgb), 0.4));
}

Here i’m not sure about compatibility and performance issues, so i would prefer to use box-shadow.

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 5.4.16

Utility:

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

System:

NodeJS : v16.14.2 npm : 8.5.0 OS : macOS Monterey

Additional Information

No response

[liamdebeasi]

Thanks! I can reproduce the described behavior, but this is not a bug in Ionic.

The iOS page transition animates the elements inside of the toolbar, but not the toolbar or header elements themselves: https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/transition/ios.transition.ts#L527-L577

You need to apply the box shadow to ion-header .header-background instead for this to work as expected.

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