From 11d39457d56c091e9c41c180391d27464ae748b5 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 6 Feb 2020 09:41:25 -0500 Subject: [PATCH] fix(header): backdrop filter no longer distorts content with collapsible header (#20388) fixes #20385 --- core/src/components/header/header.ios.scss | 8 ++++++++ core/src/components/header/header.ios.vars.scss | 5 ++++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/core/src/components/header/header.ios.scss b/core/src/components/header/header.ios.scss index ae2a968082..e401c1bef9 100644 --- a/core/src/components/header/header.ios.scss +++ b/core/src/components/header/header.ios.scss @@ -19,6 +19,14 @@ .header-translucent-ios ion-toolbar { --opacity: .8; } + + /** + * Disable the saturation otherwise it distorts the content + * background color when large header is not collapsed + */ + .header-collapse-condense-inactive .header-background { + backdrop-filter: blur($header-ios-blur); + } } .header-ios.ion-no-border ion-toolbar:last-of-type { diff --git a/core/src/components/header/header.ios.vars.scss b/core/src/components/header/header.ios.vars.scss index ce0945357f..a4e8272d6f 100644 --- a/core/src/components/header/header.ios.vars.scss +++ b/core/src/components/header/header.ios.vars.scss @@ -3,5 +3,8 @@ // iOS Header // -------------------------------------------------- +/// @prop - Blur value for backdrop-filter +$header-ios-blur: 20px; + /// @prop - Filter of the translucent header -$header-ios-translucent-filter: saturate(180%) blur(20px) !default; +$header-ios-translucent-filter: saturate(180%) blur($header-ios-blur) !default;