From f83b0005309400d674e43c497bdffbcb9d2c4d94 Mon Sep 17 00:00:00 2001
From: Israel de la Barrera <israeldlbarreral@pm.me>
Date: Mon, 22 Dec 2025 18:21:16 +0100
Subject: [PATCH] fix(header): show iOS condense header when app is in MD mode
 (#30690)

Issue number: resolves #29929

---------

## What is the current behavior?
When forcing `mode=ios` in a collapsible header,
`.header-collapse-condense` would still be applied from the
`header.md.scss` file, leaving the collapsible header always hidden.

## What is the new behavior?
When forcing `mode=ios` in a collapsible header, the
`.header-collapse-condense` styles from the `header.md.scss` file won't
be applied, and the collapsible header will be visible.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No


## Other information
Something worth mentioning is that this behavior only appears after
initial load: if the route is loaded refreshing the page, the header
will appear and work correctly, but navigating forth and back will apply
both the .ios and .md style files.

I showcase this with a modal because It'll always display the broken
hehavior.

| Before | After |
|--------|-------|
| <video
src="https://github.com/user-attachments/assets/1307ee9f-452a-4b00-877d-0b8e360d3bf7">
| <video
src="https://github.com/user-attachments/assets/f9ee3851-ce94-4a27-9947-37aa1f5433b9">
|

---------

Co-authored-by: ShaneK <shane@shanessite.net>
---
 core/src/components/header/header.md.scss     |  2 +-
 .../header/test/condense-modal/header.e2e.ts  | 71 +++++++++++++++++++
 2 files changed, 72 insertions(+), 1 deletion(-)
 create mode 100644 core/src/components/header/test/condense-modal/header.e2e.ts

diff --git a/core/src/components/header/header.md.scss b/core/src/components/header/header.md.scss
index 96cf48f92c..f54ce39735 100644
--- a/core/src/components/header/header.md.scss
+++ b/core/src/components/header/header.md.scss
@@ -8,7 +8,7 @@
   box-shadow: $header-md-box-shadow;
 }
 
-.header-collapse-condense {
+.header-md.header-collapse-condense {
   display: none;
 }
 
diff --git a/core/src/components/header/test/condense-modal/header.e2e.ts b/core/src/components/header/test/condense-modal/header.e2e.ts
new file mode 100644
index 0000000000..72cc6a7b70
--- /dev/null
+++ b/core/src/components/header/test/condense-modal/header.e2e.ts
@@ -0,0 +1,71 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This test verifies that collapsible headers with mode="ios" work correctly
+ * when both iOS and MD stylesheets are loaded. The bug occurred because
+ * `.header-collapse-condense { display: none }` in the MD stylesheet was not
+ * scoped to `.header-md`, causing it to hide iOS condense headers when both
+ * stylesheets were present.
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('header: condense with iOS mode override'), () => {
+    test('should show iOS condense header when both MD and iOS styles are loaded', async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/29929',
+      });
+
+      // Include both an MD header and an iOS modal to force both stylesheets to load
+      await page.setContent(
+        `
+        <!-- MD header to force MD stylesheet to load -->
+        <ion-header mode="md" id="mdHeader">
+          <ion-toolbar>
+            <ion-title>MD Header</ion-title>
+          </ion-toolbar>
+        </ion-header>
+
+        <!-- Modal with iOS condense header -->
+        <ion-modal>
+          <ion-header mode="ios" id="smallTitleHeader">
+            <ion-toolbar>
+              <ion-title>Header</ion-title>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content fullscreen="true">
+            <ion-header collapse="condense" mode="ios" id="largeTitleHeader">
+              <ion-toolbar>
+                <ion-title size="large">Large Header</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <p>Content</p>
+          </ion-content>
+        </ion-modal>
+        `,
+        config
+      );
+
+      const modal = page.locator('ion-modal');
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      await modal.evaluate((el: HTMLIonModalElement) => el.present());
+      await ionModalDidPresent.next();
+
+      const largeTitleHeader = modal.locator('#largeTitleHeader');
+
+      // The large title header should be visible, not hidden by MD styles
+      await expect(largeTitleHeader).toBeVisible();
+
+      // Verify it has the iOS mode class
+      await expect(largeTitleHeader).toHaveClass(/header-ios/);
+
+      // Verify it does NOT have display: none applied
+      // This would fail if the MD stylesheet's unscoped .header-collapse-condense rule applies
+      const display = await largeTitleHeader.evaluate((el) => {
+        return window.getComputedStyle(el).display;
+      });
+      expect(display).not.toBe('none');
+    });
+  });
+});