diff --git a/core/src/components/header/header.ios.scss b/core/src/components/header/header.ios.scss
index ae2a9680821..e401c1bef91 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 ce0945357f2..a4e8272d6f8 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;