mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +08:00
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>
This commit is contained in:
@ -130,7 +130,10 @@
|
|||||||
* 2. This will only apply when that content has a collapse header (ion-header[collapse="condense"])
|
* 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 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;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user