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

perf(datetime): calendar body shows immediately in modal on ios #29163

Merged
merged 2 commits into from
Mar 15, 2024

Conversation

liamdebeasi
Copy link
Contributor

@liamdebeasi liamdebeasi commented Mar 14, 2024

Issue number: resolves #24542


What is the current behavior?

WebKit has a quirk where IntersectionObserver callbacks are delayed until after an accelerated animation finishes if the "root" specified in the config is the browser viewport (the default behavior if "root" is not specified) This means that when presenting a datetime in a modal on iOS the calendar body appears blank until the modal animation finishes.

What is the new behavior?

  • We can work around this issue by observing an element inside of the datetime component and using the datetime component itself as the root. To do this, I added an .intersection-tracker element inside of datetime. This element has a dimension of 0x0 so it should not affect component layout or functionality.

I opted to add this element instead of re-using an existing element because the existing elements are not guaranteed to always be in the DOM due to different datetime presentation styles.

main branch
RPReplay_Final1710449954.MP4
RPReplay_Final1710449919.MP4

Does this introduce a breaking change?

  • Yes
  • No

Other information

Dev build: 7.8.1-dev.11710449785.14ebd5a0

@github-actions github-actions bot added the package: core @ionic/core package label Mar 14, 2024
@liamdebeasi liamdebeasi marked this pull request as ready for review March 14, 2024 21:05
core/src/components/datetime/datetime.tsx Outdated Show resolved Hide resolved
@liamdebeasi liamdebeasi added this pull request to the merge queue Mar 15, 2024
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to failed status checks Mar 15, 2024
@liamdebeasi liamdebeasi added this pull request to the merge queue Mar 15, 2024
Merged via the queue into main with commit f759776 Mar 15, 2024
46 checks passed
@liamdebeasi liamdebeasi deleted the FW-542 branch March 15, 2024 16:27
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: datetime, showing calendar body after intersection observer callback causes issues on safari
2 participants