Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
perf(datetime): calendar body shows immediately in modal on ios (#29163)
Issue number: resolves #24542 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> 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? <!-- Please describe the behavior or changes that are being added by this PR. --> - 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 | | - | - | | <video src="https://github.com/ionic-team/ionic-framework/assets/2721089/e84d111d-b156-4f45-887a-d68a1097e5dd"></video> | <video src="https://github.com/ionic-team/ionic-framework/assets/2721089/3dccf1e5-cf79-46ab-b542-0537fd46fa76"></video> | ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Dev build: `7.8.1-dev.11710449785.14ebd5a0` --------- Co-authored-by: Amanda Johnston <[email protected]>
- Loading branch information