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.

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

fix(datetime): improve datetime sizing in modals #24762

Merged
merged 2 commits into from
Feb 22, 2022
Merged

fix(datetime): improve datetime sizing in modals #24762

merged 2 commits into from
Feb 22, 2022

Conversation

sean-perkins
Copy link
Contributor

Pull request checklist

Please check if your PR fulfills the following requirements:

  • Tests for the changes have been added (for bug fixes / features)
  • Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Build (npm run build) was run locally and any changes were pushed
  • Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

  • Bugfix
  • Feature
  • Code style update (formatting, renaming)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • Documentation content changes
  • Other (please describe):

What is the current behavior?

When an ion-datetime has a sub-pixel width (either explicitly or through an auto-sizing layout), the intersection observer is unable to detect the intersecting threshold of 100% (1).

This results in the month navigation breaking, months updating sporadically on click and overall broken functionality.

Issue Number: #23992

What is the new behavior?

By applying a root margin to the intersection observer of 1px, it accounts for the difference of the sub-pixel sizing and appropriately fires the intersection observer when the month is intersecting.

This fixes all the broken behavior with the calendar month not appropriately updating.

Does this introduce a breaking change?

  • Yes
  • No

Other information

@sean-perkins sean-perkins requested a review from a team as a code owner February 9, 2022 23:11
@github-actions github-actions bot added the package: core @ionic/core package label Feb 9, 2022
Copy link
Contributor

@averyjohnston averyjohnston left a comment

Choose a reason for hiding this comment

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

Nice find 👀 Incidentally, this also seems to fix #23985; it even looks good on Firefox.

@sean-perkins sean-perkins changed the title fix(datetime): improved auto-sizing datetime support fix(datetime): improve auto-sizing datetime support Feb 14, 2022
@liamdebeasi liamdebeasi changed the title fix(datetime): improve auto-sizing datetime support fix(datetime): improve datetime sizing in modals Feb 15, 2022
Copy link
Contributor

@liamdebeasi liamdebeasi left a comment

Choose a reason for hiding this comment

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

Tested on iOS 14 + 15 and works well.

Copy link
Contributor

@liamdebeasi liamdebeasi left a comment

Choose a reason for hiding this comment

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

Just had a thought... can we add a test to verify this fixed behavior too? #24762 (review)

@sean-perkins
Copy link
Contributor Author

Just had a thought... can we add a test to verify this fixed behavior too? #24762 (review)

I was unable to replicate that issue in Chrome (the original reported issue) or in Firefox (the follow-up comment). I believe the original issue was a Chrome specific version that has since been fixed.

I can add a smoke test though, just to make sure it works with a zoom in/out active.

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.

3 participants