Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 2 commits into from
Nov 9, 2023
Merged

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

merged 2 commits into from
Nov 9, 2023

Conversation

liamdebeasi
Copy link
Contributor

@liamdebeasi liamdebeasi commented Nov 6, 2023 •
edited
Loading

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 approved these changes Nov 8, 2023
View reviewed changes
Copy link
Member

@brandyscarney brandyscarney left a comment

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.

core/src/components/header/header.ios.scss Outdated Show resolved Hide resolved
@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
45 checks passed
@liamdebeasi liamdebeasi deleted the FW-5535 branch November 9, 2023 15:00
@liamdebeasi liamdebeasi mentioned this pull request Nov 9, 2023
Closed
3 tasks
@liamdebeasi liamdebeasi mentioned this pull request Dec 14, 2023
Closed
7 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@brandyscarney brandyscarney brandyscarney approved these changes

Assignees
No one assigned
Labels
package: core @ionic/core package
Projects
None yet
Milestone
No milestone
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
@liamdebeasi @brandyscarney