diff --git a/core/src/components/header/header.ios.scss b/core/src/components/header/header.ios.scss index 634303ff8e..cda084da7c 100644 --- a/core/src/components/header/header.ios.scss +++ b/core/src/components/header/header.ios.scss @@ -132,8 +132,11 @@ * We use opacity: 0 to avoid a layout shift. * We target both the attribute and the class in the event that the attribute * is not reflected on the host in some frameworks. + * + * Both headers should be scoped to iOS mode otherwise an MD app that uses an + * iOS header may cause other MD headers to be unexpectedly hidden. */ -ion-header:not(.header-collapse-main):has(~ ion-content ion-header[collapse="condense"], -~ ion-content ion-header.header-collapse-condense) { +ion-header.header-ios:not(.header-collapse-main):has(~ ion-content ion-header.header-ios[collapse="condense"], +~ ion-content ion-header.header-ios.header-collapse-condense) { opacity: 0; } diff --git a/core/src/components/header/test/basic/header.e2e.ts b/core/src/components/header/test/basic/header.e2e.ts index 5550bc575d..67f3be9217 100644 --- a/core/src/components/header/test/basic/header.e2e.ts +++ b/core/src/components/header/test/basic/header.e2e.ts @@ -85,3 +85,91 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c }); }); }); + +/** + * This test only impacts MD applications + */ +configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('header: translucent'), () => { + test('should not hide MD headers when using a descendant iOS header in an MD app', async ({ page }) => { + test.info().annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/28867', + }); + await page.setContent( + ` + + + Header + + + + + + Header + + + + + + Welcome + + + + `, + config + ); + + const header = page.locator('ion-header#main-header'); + + /** + * The existence of the iOS header in an MD app should not cause the main MD header + * to be hidden. We do not have toHaveVisible because the behavior that hides + * the header under correct circumstances does it using opacity: 0. + * Playwright considers an element with opacity: 0 to still be visible + * because it has a non-zero bounding box. + */ + await expect(header).toHaveScreenshot(screenshot('header-md-visibility-ios-descendant')); + }); + test('should not hide MD headers when using a root iOS header in an MD app', async ({ page }) => { + test.info().annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/28867', + }); + await page.setContent( + ` + + + Header + + + + + + Header + + + + + + Welcome + + + + `, + config + ); + + const header = page.locator('ion-header#main-header'); + + /** + * The existence of the iOS header in an MD app should not cause the main MD header + * to be hidden. We do not have toHaveVisible because the behavior that hides + * the header under correct circumstances does it using opacity: 0. + * Playwright considers an element with opacity: 0 to still be visible + * because it has a non-zero bounding box. + */ + await expect(header).toHaveScreenshot(screenshot('header-md-visibility-ios-main')); + }); + }); +}); diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-md-visibility-ios-descendant-md-ltr-Mobile-Chrome-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-md-visibility-ios-descendant-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..06b4e5e7c7 Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-md-visibility-ios-descendant-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-md-visibility-ios-descendant-md-ltr-Mobile-Firefox-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-md-visibility-ios-descendant-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..6f6ca4833e Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-md-visibility-ios-descendant-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-md-visibility-ios-descendant-md-ltr-Mobile-Safari-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-md-visibility-ios-descendant-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..2a12565288 Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-md-visibility-ios-descendant-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-md-visibility-ios-main-md-ltr-Mobile-Chrome-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-md-visibility-ios-main-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..dab34d6786 Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-md-visibility-ios-main-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-md-visibility-ios-main-md-ltr-Mobile-Firefox-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-md-visibility-ios-main-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..5b9c0f573d Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-md-visibility-ios-main-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-md-visibility-ios-main-md-ltr-Mobile-Safari-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-md-visibility-ios-main-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..83c2b8a50e Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-md-visibility-ios-main-md-ltr-Mobile-Safari-linux.png differ