fix(header): backdrop filter no longer distorts content with collapsi…

…ble header (#20388) fixes #20385
ionic-team · Feb 6, 2020 · 11d3945 · 11d3945
1 parent cfcdd97
commit 11d3945
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git 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
@@ -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;