From db450b08e67563c3357df2ac7596246fb221497e Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 6 Nov 2023 10:01:25 -0500 Subject: [PATCH 1/2] fix(header): collapsible large title does not flicker when collapse prop is not relfected --- core/src/components/header/header.ios.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/core/src/components/header/header.ios.scss b/core/src/components/header/header.ios.scss index 7ed83e39ac9..4024282b84a 100644 --- a/core/src/components/header/header.ios.scss +++ b/core/src/components/header/header.ios.scss @@ -130,7 +130,9 @@ * 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. + * We target both the attribute and the class in the event that the attribute + * is not reflected on the host in some frameworks. */ -ion-header:not(.header-collapse-main):has(~ ion-content ion-header[collapse="condense"]) { +ion-header:not(.header-collapse-main):has(~ ion-content ion-header[collapse="condense"], ~ ion-content ion-header.header-collapse-condense) { opacity: 0; } From 6a97c196a3dd2579dcf990db4df05c8b997b3aba Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 8 Nov 2023 12:13:00 -0500 Subject: [PATCH 2/2] Update core/src/components/header/header.ios.scss Co-authored-by: Brandy Carney --- core/src/components/header/header.ios.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/core/src/components/header/header.ios.scss b/core/src/components/header/header.ios.scss index 4024282b84a..634303ff8ee 100644 --- a/core/src/components/header/header.ios.scss +++ b/core/src/components/header/header.ios.scss @@ -133,6 +133,7 @@ * We target both the attribute and the class in the event that the attribute * is not reflected on the host in some frameworks. */ -ion-header:not(.header-collapse-main):has(~ ion-content ion-header[collapse="condense"], ~ ion-content ion-header.header-collapse-condense) { +ion-header:not(.header-collapse-main):has(~ ion-content ion-header[collapse="condense"], +~ ion-content ion-header.header-collapse-condense) { opacity: 0; }