From 56f41d3c8c6324d3374288335c4c2d1c40ad20a3 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 3 Oct 2023 16:40:58 -0400 Subject: [PATCH 1/3] fix(header): collapsible large title main header does not flicker on load --- core/src/components/header/header.ios.scss | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/core/src/components/header/header.ios.scss b/core/src/components/header/header.ios.scss index 7c1211b6afb..831d0523cea 100644 --- a/core/src/components/header/header.ios.scss +++ b/core/src/components/header/header.ios.scss @@ -107,3 +107,21 @@ .header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-buttons.buttons-collapse { visibility: hidden; } + +/** + * The main header is only hidden once the collapsible large + * title is configured. As a result, if the main header loads + * before the collapsible large title is configured then the + * main header will be visible briefly before being hidden + * by the collapsible large title. + * + * The following selector ensures that any main header + * on a page with a collapsible large title is hidden + * before the collapsible large title is configured. + * Once the collapsible large title is configured the main + * header will have the ".header-collapse-main" class, and + * this selector will no longer apply. + */ +ion-header:not(.header-collapse-main):has(~ ion-content ion-header[collapse="condense"]) { + opacity: 0; +} From d266b9a731b193d7ceee1700c7e5cde9fdcfcc0c Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 3 Oct 2023 16:44:13 -0400 Subject: [PATCH 2/3] add note --- core/src/components/header/header.ios.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/core/src/components/header/header.ios.scss b/core/src/components/header/header.ios.scss index 831d0523cea..ec445d854c5 100644 --- a/core/src/components/header/header.ios.scss +++ b/core/src/components/header/header.ios.scss @@ -121,6 +121,8 @@ * Once the collapsible large title is configured the main * header will have the ".header-collapse-main" class, and * this selector will no longer apply. + * + * We use opacity: 0 to avoid a layout shift. */ ion-header:not(.header-collapse-main):has(~ ion-content ion-header[collapse="condense"]) { opacity: 0; From 1e1cf52a86301cce88ef992a1778b15924691f5a Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 3 Oct 2023 16:47:22 -0400 Subject: [PATCH 3/3] add more comments --- core/src/components/header/header.ios.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/core/src/components/header/header.ios.scss b/core/src/components/header/header.ios.scss index ec445d854c5..26b6453332f 100644 --- a/core/src/components/header/header.ios.scss +++ b/core/src/components/header/header.ios.scss @@ -122,6 +122,11 @@ * header will have the ".header-collapse-main" class, and * this selector will no longer apply. * + * The :has(...) part of the selector ensures a couple things: + * 1. This will only apply within a page view since the content + * must be a subsequent-sibling of the header (~ ion-content). + * 2. This will only apply when that content has a collapse header (ion-header[collapse="condense"]) + * * We use opacity: 0 to avoid a layout shift. */ ion-header:not(.header-collapse-main):has(~ ion-content ion-header[collapse="condense"]) {