bug: ios transition does not account for fade header

[liamdebeasi]

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
• Nightly

Current Behavior

When using the fade header the iOS transition forcibly shows the header+toolbars even when the header is expanded.

Expected Behavior

The transition should only show the header+toolbars if the header is collapsed

Steps to Reproduce

1. Open src/components/nav/test/basic.html
2. Add collapse="fade" to the headers in PageOne and PageTwo.
3. Add fullscreen="true" to the contents in PageOne and PageTwo.
4. Click "Go to Page Two". Observe that the fade header flashed briefly.

fade-header-transition.mov

Code Reproduction URL

No response

Ionic Info

N/A

Additional Information

No response

[JulienLecoq]

The bug also affect simple ion-header (when you don't have a ion-header inside the ion-content).
The ion-header with the background and the border appears on transition and then quickly disappears whereas the background and border should just not appear at all.

[cdes]

I'm facing this issue too with a simple header.

Here's a repro:
https://stackblitz.com/edit/angular-bhqqee-jzvqwc?file=src%2Ftabs%2Fhome-page.tsx

And here's a video showing the issue

CleanShot.2022-10-15.at.22.08.01.mov

[cperezabo]

Hi, why has it not been resolved yet?
This issue is 2 years old and it's a very ugly UI glitch @liamdebeasi.

[cperezabo]

I can't believe trusting in a framework like Ionic, advertised the way you advertise it, and then having to claim for the fix of a coarse bug like this, fully identified years ago by the lead developer of the framework! 🤦🏻‍♂️

[thetaPC]

Thanks for the issue! This has been resolved via #30705 and will be available in an upcoming release of Ionic.

[thetaPC]

This issue was fixed in v8.7.7! Please update to the latest version to receive the fix.