- Notifications
You must be signed in to change notification settings - Fork13.4k
fix(header): prevent flickering during iOS page transitions#30705
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.
Already on GitHub?Sign in to your account
base:main
Are you sure you want to change the base?
Conversation
vercelbot commentedOct 3, 2025 • edited
Loading Uh oh!
There was an error while loading.Please reload this page.
edited
Uh oh!
There was an error while loading.Please reload this page.
The latest updates on your projects. Learn more aboutVercel for GitHub.
|
| * Large title toolbar should just use the content background | ||
| * since it needs to blend in with the header above it. | ||
| */ | ||
| .header-collapse-condenseion-toolbar, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
This is the large title that is tied to the inactive header.
| .header-collapse-condenseion-toolbar, | ||
| /** | ||
| * Override styles applied during the page transition to prevent | ||
| * header flickering. | ||
| */ | ||
| .header-collapse-condense-inactive.header-transitioning:not(.header-collapse-condense)ion-toolbar { | ||
| --background:var(--ion-background-color,#fff); | ||
| } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
I grouped these together so they will always be the same background color since they are related to the condensed header.
| (result)=>{ | ||
| if(result.animation){ | ||
| result.animation.destroy(); | ||
| consttransitioningInactiveHeader=getIosIonHeader(opts); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
I'm grabbing the header here so we don't have to do query it twice withinbeforeTransition and in thefinally.
| ) | ||
| .finally(()=>{ | ||
| // Ensure that the header is restored to its original state. | ||
| setHeaderTransitionClass(transitioningInactiveHeader,false); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
Removed the class here since it should be removed regardless of the success ofrunTransition.
| return; | ||
| } | ||
| consttransitionClass='header-transitioning'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
I'm open to a different name. I'm not too happy with it but not sure what else to call it to be specific.
| if(mode!=='ios'){ | ||
| returnnull; | ||
| } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
I didn't see the benefit of querying out the header if the mode ismd. However, we would have to update this innext to usetheme instead ofmode.
| ) | ||
| .finally(()=>{ | ||
| // Ensure that the header is restored to its original state. | ||
| setHeaderTransitionClass(transitioningInactiveHeader,false); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
Removed class at the end so the header can go back to its default, preventing any potential regressions.
Uh oh!
There was an error while loading.Please reload this page.
Issue number:resolves#25326
What is the current behavior?
The header flickers upon page transition when on iOS mode and using a condensed header:
Entering Page Two (P1 → P2):
When navigating to Page Two, which has a collapsing header (intended to be hidden until scroll), the header briefly flashes into view. This happens because the header is initially rendered with full
opacity: 1before the component's logic can applyopacity: 0to hide it, causing a visible flicker.Navigating Back (P2 → P1):
When navigating back, Page One's header briefly bleeds through the top of Page Two. Although Page Two is on top (
z−index: 100), its collapsing header is set toopacity: 0. This transparency allows Page One header (z−index: 99) to become visible underneath, as the transparent area cannot block the content below it.The header flickers upon page transition when on iOS mode and using a fade header:
Entering Page Two (P1 → P2):
When navigating to Page Two, which has a fade header (should not have a background on load), the header background briefly flashes into view. This happens because the header is initially rendered with full
opacity: 1before the component's logic can applyopacity: 0to hide it, causing a visible flicker.What is the new behavior?
This guarantees the header to act as an opaque block during the page transition, eliminating visual flickering caused by early
opacity: 0or the header underneath bleeding through.This guarantees the header to act as a transparent block during the page transition, eliminating visual flickering caused by default
opacity: 1.Does this introduce a breaking change?
Other information
Dev build:
8.7.6-dev.11759524961.1cff6814