diff --git a/core/src/components.d.ts b/core/src/components.d.ts index e8653b78131..263b126bf32 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -1460,7 +1460,7 @@ export namespace Components { */ "theme"?: "ios" | "md" | "ionic"; /** - * If `true`, the header will be translucent. Only applies when the theme is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content. + * If `true`, the header will be translucent. Only applies when the theme is `"ios"` or `"ionic"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content. * @default false */ "translucent": boolean; @@ -7369,7 +7369,7 @@ declare namespace LocalJSX { */ "theme"?: "ios" | "md" | "ionic"; /** - * If `true`, the header will be translucent. Only applies when the theme is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content. + * If `true`, the header will be translucent. Only applies when the theme is `"ios"` or `"ionic"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content. * @default false */ "translucent"?: boolean; diff --git a/core/src/components/header/header.ionic.scss b/core/src/components/header/header.ionic.scss index 8c7cc21fd10..b7b6ce9c578 100644 --- a/core/src/components/header/header.ionic.scss +++ b/core/src/components/header/header.ionic.scss @@ -17,3 +17,16 @@ ion-toolbar + ion-toolbar { --padding-start: #{globals.$ion-space-400}; --padding-end: #{globals.$ion-space-400}; } + +@supports (backdrop-filter: blur(0)) { + .header-background { + @include globals.position(0, 0, 0, 0); + + position: absolute; + + backdrop-filter: saturate(180%) blur(globals.$ion-scale-100); + } + .header-translucent-ionic ion-toolbar { + --opacity: 0.7; + } +} diff --git a/core/src/components/header/header.tsx b/core/src/components/header/header.tsx index ab87f2c82e9..69c43335aaa 100644 --- a/core/src/components/header/header.tsx +++ b/core/src/components/header/header.tsx @@ -55,7 +55,7 @@ export class Header implements ComponentInterface { /** * If `true`, the header will be translucent. - * Only applies when the theme is `"ios"` and the device supports + * Only applies when the theme is `"ios"` or `"ionic"` and the device supports * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). * * Note: In order to scroll content behind the header, the `fullscreen` @@ -239,7 +239,7 @@ export class Header implements ComponentInterface { }} {...inheritedAttributes} > - {theme === 'ios' && translucent &&
} + {theme !== 'md' && translucent &&
} ); diff --git a/core/src/components/header/test/fade/header.e2e.ts b/core/src/components/header/test/fade/header.e2e.ts index 5bf7a0fbf6a..b93b395d21a 100644 --- a/core/src/components/header/test/fade/header.e2e.ts +++ b/core/src/components/header/test/fade/header.e2e.ts @@ -2,9 +2,9 @@ import { expect } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; /** - * Translucent effect is only available in iOS mode. + * Translucent effect is only available in iOS and Ionic mode. */ -configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { +configs({ modes: ['ios', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { test.describe(title('header: fade'), () => { test('should not have visual regressions with fade header', async ({ page }) => { await page.goto('/src/components/header/test/fade', config); diff --git a/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-blurred-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-blurred-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..0ff82c5ea06 Binary files /dev/null and b/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-blurred-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-blurred-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-blurred-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..12cf6307d85 Binary files /dev/null and b/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-blurred-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-blurred-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-blurred-diff-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..0581f8c2e6f Binary files /dev/null and b/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-blurred-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-not-blurred-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-not-blurred-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..c371a367571 Binary files /dev/null and b/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-not-blurred-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-not-blurred-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-not-blurred-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..07c27b1917a Binary files /dev/null and b/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-not-blurred-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-not-blurred-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-not-blurred-diff-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..46214df5c44 Binary files /dev/null and b/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-not-blurred-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ