bug: ios transition does not account for fade header

[liamdebeasi]

Prerequisites

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

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [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.

https://user-images.githubusercontent.com/2721089/169564233-2b3fb414-f9dd-436d-acef-71abc0e882e0.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

https://user-images.githubusercontent.com/1207863/196004317-fd2bb875-7d97-4f3e-aab7-1136d2d333f3.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! 🤦🏻‍♂️