From a3666ddf0ccc44c696121a8d6107015dbe7aeabb Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 7 Nov 2019 09:51:03 -0500 Subject: [PATCH] fix(header): avoid flicker on ios when collapsing (#19850) fixes #19839 --- core/src/components/header/header.ios.scss | 25 +++++++++++----------- 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/core/src/components/header/header.ios.scss b/core/src/components/header/header.ios.scss index 1690e029668..e90212913a9 100644 --- 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; } \ No newline at end of file