fix(header): collapsible large title main header does not flicker on load

[liamdebeasi]

Issue number: resolves #27060

---

What is the current behavior?

The main header is controlled by the header with collapse="condense" set:

ionic-framework/core/src/components/header/header.tsx

Line 144 in a04a11b

private async setupCondenseHeader(contentEl: HTMLElement | null, pageEl: Element | null) {

The collapse header will hide the main header and then show it once the user has scrolled enough. However, if the main header is rendered before the collapse header is rendered, then the main header will be visible for a brief moment before being hidden by the collapse header. This gives the perception of flicker that is reported on the linked issue.

What is the new behavior?

• The main header will be hidden on load if it loads before the collapse header

The selector was written in a way such that once the collapse header loads, this CSS no longer applies (since the collapse header will add .header-collapse-main to the main header)

main	branch
RPReplay_Final1696366309.MP4	RPReplay_Final1696366283.MP4

Does this introduce a breaking change?

• Yes
• No

Other information

Note: :has browser compat is still fairly new. However, it is available on both Chromium and WebKit browsers (and has been for at least a year): https://caniuse.com/?search=%3Ahas

Given that this bug is a fairly minor UI glitch (as opposed to something that would cause an app to crash or otherwise malfunction), I think this is an acceptable tradeoff. As time goes on this will become less of a concern as more users update their devices.

Dev build: 7.4.3-dev.11696365694.156f41d3

[thetaPC]

I'm still seeing it with the dev build in one of the community's repo. The flickering is happening on the name.

I couldn't replicate the issue on a fresh starter though. I didn't see anything out of place in the community's repo.

Screen.Recording.2023-10-04.at.11.45.53.AM.mov

[liamdebeasi]

That doesn't look like the same issue. This PR addresses an issue when the main header loads before the collapsing header, but in your demo the collapsing header is already loaded. I didn't look too much into why it was happening, but I did verify that the behavior is not being caused by my dev build.

[thetaPC]

That doesn't look like the same issue. This PR addresses an issue when the main header loads before the collapsing header, but in your demo the collapsing header is already loaded. I didn't look too much into why it was happening, but I did verify that the behavior is not being caused by my dev build.

Do we have a ticket tracking this other issue?

[liamdebeasi]

No, but I'm also not confident this is an Ionic bug. I wasn't able to reproduce on my end in an Ionic starter app. (Though I can reproduce the behavior in the user's app)

[thetaPC]

LGTM