From b642b532e8846042f1317dc936191d0934b23945 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 29 Oct 2019 15:43:26 -0400
Subject: [PATCH] fix(header): translucent toolbars now work with collapsible
 headers (#19774)

fixes #19773
---
 core/src/components/header/header.utils.ts        |  4 ++--
 core/src/components/toolbar/test/title/index.html | 10 +++++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/core/src/components/header/header.utils.ts b/core/src/components/header/header.utils.ts
index 9f93299c40..c5dd7c6ee9 100644
--- a/core/src/components/header/header.utils.ts
+++ b/core/src/components/header/header.utils.ts
@@ -60,7 +60,7 @@ export const handleContentScroll = (scrollEl: HTMLElement, scrollHeaderIndex: He
   });
 };
 
-export const setToolbarBackgroundOpacity = (toolbar: ToolbarIndex, opacity: number | undefined) => {
+export const setToolbarBackgroundOpacity = (toolbar: ToolbarIndex, opacity?: number) => {
   if (opacity === undefined) {
     toolbar.background.style.removeProperty('--opacity');
   } else {
@@ -117,7 +117,7 @@ export const handleToolbarIntersection = (ev: any, mainHeaderIndex: HeaderIndex,
       if (hasValidIntersection) {
         setHeaderActive(mainHeaderIndex);
         setHeaderActive(scrollHeaderIndex, false);
-        setToolbarBackgroundOpacity(mainHeaderIndex.toolbars[0], 1);
+        setToolbarBackgroundOpacity(mainHeaderIndex.toolbars[0]);
       }
     }
   });
diff --git a/core/src/components/toolbar/test/title/index.html b/core/src/components/toolbar/test/title/index.html
index db542b65ed..a8fd544740 100644
--- a/core/src/components/toolbar/test/title/index.html
+++ b/core/src/components/toolbar/test/title/index.html
@@ -30,6 +30,10 @@
     .create ion-icon {
       transform: scale(0.9);
     }
+    
+    .main-toolbar {
+      --background: rgba(0, 0, 0, 0.05);
+    }
   </style>
 </head>
 
@@ -77,8 +81,8 @@
       connectedCallback() {
   
         this.innerHTML = `
-          <ion-header class="main-header">
-            <ion-toolbar>    
+          <ion-header class="main-header" translucent>
+            <ion-toolbar class="main-toolbar">    
               <ion-buttons collapse>
                 <ion-back-button default-href="/"></ion-back-button>
               </ion-buttons>  
@@ -89,7 +93,7 @@
             </ion-toolbar>
           </ion-header>
         
-          <ion-content id="content" class="main-content">
+          <ion-content id="content" class="main-content" fullscreen>
             <ion-header collapse="condense">              
               <ion-toolbar>      
                 <ion-title size="large">Page Two</ion-title>