Repository navigation
bug: ios transition does not account for fade header #25326
Description
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
- Open
src/components/nav/test/basic.html - Add
collapse="fade"to the headers inPageOneandPageTwo. - Add
fullscreen="true"to the contents inPageOneandPageTwo. - 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
Activity
JulienLecoq commentedon Jul 30, 2022
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 commentedon Oct 15, 2022
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 commentedon Apr 29, 2024
Hi, why has it not been resolved yet?
This issue is 2 years old and it's a very ugly UI glitch @liamdebeasi.
cperezabo commentedon May 3, 2024
fix(header): prevent flickering during iOS page transitions (#30705)
thetaPC commentedon Oct 14, 2025
Thanks for the issue! This has been resolved via #30705 and will be available in an upcoming release of Ionic.
thetaPC commentedon Oct 15, 2025
This issue was fixed in v8.7.7! Please update to the latest version to receive the fix.