Skip to content

fix(header): collapsible large title does not flicker when collapse prop not reflected - #28472

Merged
liamdebeasi merged 2 commits into
mainfrom
FW-5535
Nov 9, 2023
Merged

fix(header): collapsible large title does not flicker when collapse prop not reflected#28472
liamdebeasi merged 2 commits into
mainfrom
FW-5535

Conversation

@liamdebeasi

@liamdebeasi liamdebeasi commented Nov 6, 2023

Copy link
Copy Markdown
Contributor

Issue number: resolves #28466


What is the current behavior?

In #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?

  • I improved this fix by also targeting the class set on the host. This class is set regardless of property reflection status.
main branch
before.mp4
RPReplay_Final1699283941.MP4

Does this introduce a breaking change?

  • Yes
  • No

Other information

Dev build: 7.5.4-dev.11699282935.1db450b0

@liamdebeasi liamdebeasi changed the title fix(header): collapsible large title does not flicker when collapse p… fix(header): collapsible large title does not flicker when collapse prop not reflected Nov 6, 2023
@github-actions github-actions Bot added the package: core @ionic/core package label Nov 6, 2023
@liamdebeasi
liamdebeasi marked this pull request as ready for review November 6, 2023 15:36
@liamdebeasi
liamdebeasi requested review from a team and brandyscarney and removed request for a team November 6, 2023 15:37

@brandyscarney brandyscarney left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested this out in the app in the linked issue and it seems to resolve the original issue. Also tested by adding a scrollable list and a translucent header and everything worked well with the dev build.

Comment thread core/src/components/header/header.ios.scss Outdated
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
@liamdebeasi
liamdebeasi added this pull request to the merge queue Nov 9, 2023
Merged via the queue into main with commit 8227b0e Nov 9, 2023
@liamdebeasi
liamdebeasi deleted the FW-5535 branch November 9, 2023 15:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

bug: collapsible large title flickers when collapse prop is not reflected on host

2 participants