refactor(datetime): use scroll listener to detect month changes

[liamdebeasi]

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)
  • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
• 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?

Issue URL: resolves #24980, resolves #25257

The datetime component in v6 was originally built using IntersectionObserver to detect when the month was swiped. This was done as it was easy to configure and had minimal impact on performance. Unfortunately, the implementation of IntersectionObserver across browsers is inconsistent, buggy, and overall unreliable for our use case.

Related issues:

#25007
#24482
#24472
#24405
#23992
#23985
#25257
#24980

We have made several patches to avoid these issues. However, the team has decided to look into using a scroll listener instead to improve the reliability of the component.

What is the new behavior?

This PR makes the following changes:

• Removes the IO on the calendar body and replaces it with a scroll event listener. This scroll listener sets a timer that fires when scrolling stops (~150ms after the last scroll event). The setTimeout callback then runs the same logic that the IO callback did to update the active month.
• Removes the IO-specific hacks from the month change callback.
• Updates the name of listener methods to remove any mention of intersection observer
• Removes the overlayIsPresenting hack
• Added a tech debt ticket for the onIonChange hacks for the picker wheels.

Note: The following hacks for Safari 14 are still relevant as the scroll event is also impacted:

1. ionic-framework/core/src/components/datetime/datetime.tsx

   Line 1277 in 420f9bb

   // Due to a Safari 14 issue we need to destroy

2. https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/datetime/datetime.scss#L120

Does this introduce a breaking change?

• Yes
• No

Other information

Dev build: 6.1.14-dev.11657300607.18e0f2d1

Performance

The performance difference is pretty minimal. The following stats were taken from an iPhone 7 running iOS 15.4.1.

(I also tested iOS 13 + iOS 14 and saw no behavior quirks)

Overall the CPU usage remained about the same. The main branch does show a slightly higher average CPU usage, but the difference between the two averages is only a few percentage points.

The screenshot with the scroll listener does show significantly more timers which is to be expected. Additionally, there is more purple (JavaScript & Events). We are using setTimeout to detect the end of the scroll gesture and cancelling it every time a new scroll event is dispatched.

main branch

datetime-scroll-listener branch

I also tested this on a Samsung Galaxy S3 (https://www.gsmarena.com/samsung_galaxy_s_iii_cdma-4799.php) running Android 4.4 with Chrome 81. The phone was too slow to take a timeline in Chrome dev tools, but the swiping experience between main and this branch was very similar.

[liamdebeasi]

Open question: Should we remove the tests that were added to account for IntersectionObserver-related quirks? For example, the sub-pixel-width and zoom tests

[sean-perkins]

Yeah I think removing the sub-pixel and zoom tests makes sense now that we don't have a dependency on an intersection observer.

[averyjohnston]

^ Agreed.

[averyjohnston]

Awesome work on this, should save us a bunch of trouble 😁

[sean-perkins]

Death to the IO 💀

[zhaoxiongxing]

This problem is most serious in earlier versions of Android and Huawei Hongmeng system. Thank you for solving this problem.