fix(header): avoid flicker on ios when collapsing (#19850)

fixes #19839
ionic-team · Nov 7, 2019 · a3666dd · a3666dd
1 parent cace1b3
commit a3666dd
Showing 1 changed file with 13 additions and 12 deletions.
diff --git a/core/src/components/header/header.ios.scss b/core/src/components/header/header.ios.scss
@@ -56,18 +56,19 @@
   transition: all 0.2s ease-in-out;
 }
 
-/**
- * There is a bug in Safari where animating the opacity
- * on an element in a scrollable container while scrolling
- * causes the scroll position to jump to the top
- */
-.header-collapse-condense ion-toolbar ion-title,
-.header-collapse-condense ion-toolbar ion-buttons {
-  transition: none;
-}
-
-.header-collapse-condense-inactive ion-toolbar.in-toolbar ion-title,
-.header-collapse-condense-inactive ion-toolbar.in-toolbar ion-buttons.buttons-collapse {
+.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,
+.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse {
   opacity: 0;
   pointer-events: none;
+}
+
+/**
+ * There is a bug in Safari where changing
+ * the opacity of an element in a scrollable container
+ * while rubber-banding causes the scroll position
+ * to jump to the top
+ */
+.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-title,
+.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-buttons.buttons-collapse {
+  visibility: hidden;
 }