fix(ios): translucent toolbar blur no longer obscures entering page t…

…itle (#20314) fixes #19158
ionic-team · Jan 29, 2020 · e580b88 · e580b88
1 parent 1e2946e
commit e580b88
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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();