Skip to content

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 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.

4 participants