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

v8.x

Current Behavior

In Ionic 6 I was able to use ion-header with collapse="condense" even when my App was in "md" mode by setting the header mode to "ios":

<ion-header translucent="true" mode="ios">
  <ion-toolbar mode="md">
    <ion-title>Headline</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-header collapse="condense" mode="ios">
    <ion-toolbar mode="md">
      <ion-title size="large">Headline</ion-title>
    </ion-toolbar>
  </ion-header>
</ion-content>

This is still working with Ionic 8 when the current page is directly accessed via refresh in the browser.

But once you navigate away within the app and navigate back to the affected page, the collapsible large header is gone and the original header on top is empty.

Expected Behavior

I am not happy that I read in some bug report that changing the mode on the fly is not working anymore.

Even when not changing, but just setting the mode via variable on element creation, it is not working:

This works:

<ion-header translucent="true" mode="ios">

These don't:

<ion-header translucent="true" mode="{{'ios'}}">
<ion-header translucent="true" [mode]="'ios'">
<ion-header translucent="true" [attr.mode]="'ios'">

It would be wonderful to have the original bevaiour back, but at least I am expecting the behaviour to be consistent.

Steps to Reproduce

1.) Use the conference app:

ionic start "Conference App" https://github.com/ionic-team/ionic-conference-app
cd conference-app
ionic serve

2.) Edit src/app/pages/schedule/schedule.html and just add the modes:

<ion-header translucent="true" mode="ios">
  <ion-toolbar mode="md">
...

<ion-content fullscreen="true">
  <ion-header collapse="condense" mode="ios">
    <ion-toolbar mode="md">
...

3.) Directly visit http://localhost:8100/app/tabs/schedule in your browser (the app should automatically be in "md" mode) still the iOS collapsible header is working

4.) Now navigate via the App sidemenu to some other page like "About", then back to "Schedule" and now the header is broken:

Code Reproduction URL

See steps above in blank conference starter

Ionic Info

Ionic:

Ionic CLI : 7.2.0
Ionic Framework : @ionic/angular 8.2.0
@angular-devkit/build-angular : 18.0.2
@angular-devkit/schematics : 18.0.2
@angular/cli : 18.0.2
@ionic/angular-toolkit : 6.1.0

Capacitor:

Capacitor CLI : 4.6.3
@capacitor/android : 4.6.3
@capacitor/core : 4.6.3
@capacitor/ios : 4.6.3

Utility:

cordova-res : 0.15.4
native-run (update available: 2.0.1) : 1.7.4

System:

NodeJS : v18.20.3
npm : 10.7.0
OS : macOS Unknown

Additional Information

While inspecting the checkCollapsibleHeader() function in

https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/header/header.tsx#L73

I noticed that it checks the current mode by calling getIonMode(this)

private async checkCollapsibleHeader() {
    const mode = getIonMode(this);
    if (mode !== 'ios') {
      return;
    }

which in turn calls stencil's getMode(ref)

export const getIonMode = (ref?: any): Mode => {
  return (ref && getMode(ref)) || defaultMode;
};

which I suspect to not reliably detected the hostRef's mode

export const getMode = (ref: d.RuntimeRef) => getHostRef(ref).$modeName$;

https://github.com/ionic-team/stencil/blob/5c4c969d2ee8e349891e5d41730512d9d257d893/src/runtime/mode.ts#L10