diff --git a/core/src/components/footer/footer.ios.scss b/core/src/components/footer/footer.ios.scss
index b42fc1bc99..009e4154d2 100644
--- a/core/src/components/footer/footer.ios.scss
+++ b/core/src/components/footer/footer.ios.scss
@@ -9,13 +9,15 @@
 }
 
 @supports (backdrop-filter: blur(0)) {
-  .footer-translucent-ios {
+  .footer-background {
+    @include position(0, 0, 0, 0);
+
+    position: absolute;
+
     backdrop-filter: $footer-ios-translucent-filter;
   }
-
   .footer-translucent-ios ion-toolbar {
     --opacity: .8;
-    --backdrop-filter: #{$footer-ios-translucent-filter};
   }
 }
 
diff --git a/core/src/components/footer/footer.tsx b/core/src/components/footer/footer.tsx
index 6f8c1237d1..3eb0369d89 100644
--- a/core/src/components/footer/footer.tsx
+++ b/core/src/components/footer/footer.tsx
@@ -40,6 +40,10 @@ export class Footer implements ComponentInterface {
           [`footer-translucent-${mode}`]: translucent,
         }}
       >
+        { mode === 'ios' && translucent &&
+          <div class="footer-background"></div>
+        }
+        <slot></slot>
       </Host>
     );
   }
diff --git a/core/src/components/header/header.ios.scss b/core/src/components/header/header.ios.scss
index e90212913a..738e4707ee 100644
--- a/core/src/components/header/header.ios.scss
+++ b/core/src/components/header/header.ios.scss
@@ -9,13 +9,15 @@
 }
 
 @supports (backdrop-filter: blur(0)) {
-  .header-translucent-ios {
+  .header-background {
+    @include position(0, 0, 0, 0);
+
+    position: absolute;
+
     backdrop-filter: $header-ios-translucent-filter;
   }
-  
   .header-translucent-ios ion-toolbar {
     --opacity: .8;
-    --backdrop-filter: #{$header-ios-translucent-filter};
   }
 }
 
diff --git a/core/src/components/header/header.tsx b/core/src/components/header/header.tsx
index 4b22f0d157..7cd4a22bfb 100644
--- a/core/src/components/header/header.tsx
+++ b/core/src/components/header/header.tsx
@@ -141,6 +141,7 @@ export class Header implements ComponentInterface {
   }
 
   render() {
+    const { translucent } = this;
     const mode = getIonMode(this);
     const collapse = this.collapse || 'none';
     return (
@@ -157,6 +158,10 @@ export class Header implements ComponentInterface {
           [`header-translucent-${mode}`]: this.translucent,
         }}
       >
+        { mode === 'ios' && translucent &&
+          <div class="header-background"></div>
+        }
+        <slot></slot>
       </Host>
     );
   }
diff --git a/core/src/utils/transition/ios.transition.ts b/core/src/utils/transition/ios.transition.ts
index 2a3328e9a3..d2fbbc0f55 100644
--- a/core/src/utils/transition/ios.transition.ts
+++ b/core/src/utils/transition/ios.transition.ts
@@ -342,10 +342,14 @@ export const iosTransitionAnimation = (navEl: HTMLElement, opts: TransitionOptio
         }
 
         enteringToolBarItems.fromTo('transform', `translateX(${OFF_RIGHT})`, `translateX(${CENTER})`);
+        enteringToolBarBg.beforeClearStyles([OPACITY, 'transform']);
 
-        enteringToolBarBg
-          .beforeClearStyles([OPACITY])
-          .fromTo(OPACITY, 0.01, 1);
+        const translucentHeader = parentHeader?.translucent;
+        if (!translucentHeader) {
+          enteringToolBarBg.fromTo(OPACITY, 0.01, 1);
+        } else {
+          enteringToolBarBg.fromTo('transform', (isRTL ? 'translateX(-100%)' : 'translateX(100%)'), 'translateX(0px)');
+        }
 
         // forward direction, entering page has a back button
         if (!forward) {
@@ -479,12 +483,15 @@ export const iosTransitionAnimation = (navEl: HTMLElement, opts: TransitionOptio
           }
 
           leavingToolBarItems.fromTo('transform', `translateX(${CENTER})`, (isRTL ? 'translateX(-100%)' : 'translateX(100%)'));
-
+          leavingToolBarBg.beforeClearStyles([OPACITY, 'transform']);
           // leaving toolbar, back direction, and there's no entering toolbar
           // should just slide out, no fading out
-          leavingToolBarBg
-            .beforeClearStyles([OPACITY])
-            .fromTo(OPACITY, 1, 0.01);
+          const translucentHeader = parentHeader?.translucent;
+          if (!translucentHeader) {
+            leavingToolBarBg.fromTo(OPACITY, 0.99, 0);
+          } else {
+            leavingToolBarBg.fromTo('transform', 'translateX(0px)', (isRTL ? 'translateX(-100%)' : 'translateX(100%)'));
+          }
 
           if (backButtonEl && !backward) {
             const leavingBackBtnText = createAnimation();