From 8227b0ee6d5250e122a34a83c644f8a74fbbafd5 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 9 Nov 2023 09:46:01 -0500
Subject: [PATCH] fix(header): collapsible large title does not flicker when
 collapse prop not reflected (#28472)

Issue number: resolves #28466

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

In https://github.com/ionic-team/ionic-framework/issues/27060 I fixed an
issue where the main title would be visible briefly before the
collapsible large title a) was configured and b) hid the main title. I
accomplished this by using CSS to target
`ion-header[collapse="condense"]`. However, I failed to account for when
the property is not reflected on the host. Some JS frameworks allow the
property to remain on the element but some do not.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- I improved this fix by also targeting the class set on the host. This
class is set regardless of property reflection status.

| main | branch |
| - | - |
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/991523da-8549-451b-930f-5df45c2783de"></video>
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/149c9546-2d9b-42a2-89f1-a17fa146aee6"></video>
|

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `7.5.4-dev.11699282935.1db450b0`

---------

Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
---
 core/src/components/header/header.ios.scss | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/core/src/components/header/header.ios.scss b/core/src/components/header/header.ios.scss
index 7ed83e39ac..634303ff8e 100644
--- a/core/src/components/header/header.ios.scss
+++ b/core/src/components/header/header.ios.scss
@@ -130,7 +130,10 @@
  * 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;
 }