bug: iOS 17, ion-datetime jumps between months in an infinite loop after scrolling to min month

[RobertZetterlund]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

On and iPhone 15 running iOS 17: When providing min and max to <IonDatetime/> and changing months with the arrows the selector jumps between months.

https://github.com/ionic-team/ionic-framework/assets/31474146/491eb2a6-cd8c-4262-b086-00ceffd54825

Expected Behavior

When providing min and max to <IonDatetime/> and changing months with the arrows the selected month should change in that direction and stay selected.

https://github.com/ionic-team/ionic-framework/assets/31474146/c5d0d959-6cd2-44e7-bbda-ca8117eb1294

Steps to Reproduce

Clone https://github.com/RobertZetterlund/datetime-bug-repro and run it. Click on the datetime selector and change the month by using the arrows. Run ios version 17 on an iphone 15 / pro

Code Reproduction URL

https://github.com/RobertZetterlund/datetime-bug-repro

Ionic Info

[WARN] Error loading @capacitor/android package.json: Error: Cannot find module
       '@capacitor/android/package.json'

       Require stack:
       - /opt/homebrew/lib/node_modules/@ionic/cli/lib/project/index.js
       - /opt/homebrew/lib/node_modules/@ionic/cli/lib/index.js
       - /opt/homebrew/lib/node_modules/@ionic/cli/index.js
       - /opt/homebrew/lib/node_modules/@ionic/cli/bin/ionic

Ionic:

   Ionic CLI       : 7.1.1 (/opt/homebrew/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 7.5.2

Capacitor:

   Capacitor CLI      : 5.5.1
   @capacitor/android : not installed
   @capacitor/core    : 5.5.1
   @capacitor/ios     : 5.5.1

Utility:

   cordova-res                          : not installed globally
   native-run (update available: 2.0.0) : 1.7.4

System:

   NodeJS : v16.20.2 (/opt/homebrew/Cellar/node@16/16.20.2/bin/node)
   npm    : 8.19.4
   OS     : macOS Unknown

Additional Information

This is a duplicate of https://github.com/ionic-team/ionic-framework/issues/28260 which was closed due to lack of reproducible example (which in turn links to https://github.com/ionic-team/ionic-framework/issues/25752).

[randjelovicaleksandar]

Any news on this one?

[RobertZetterlund]

Any news on this one?

I think it might've had something to do with the daylight saving time event that occured recently

[randjelovicaleksandar]

This is still reproducible with version 7.6.4. @liamdebeasi Can you please set this as a priority? IonDatetime is not usable with this bug

This happens to me when the date picker has a range of two months. For example, min date is in January and max date is in February. This doesn't happen if min date and max date are in the same month. This doesn't happen if the range is three months. For example, min date is January and max date is in March.

[averyjohnston]

Thank you for the issue. After investigating, we have isolated this to a Webkit bug. Adding or removing scroll-snap-align: none to a slide in a scroll snap container (which is done in ion-datetime to prevent users from swiping to disabled months) can cause the scroll position of the container to jump forwards or backwards. I have reported this bug to the Webkit team, and we will post on this issue when we have more to share.

[RobertZetterlund]

Thank you for the issue. After investigating, we have isolated this to a Webkit bug. Adding or removing scroll-snap-align: none to a slide in a scroll snap container (which is done in ion-datetime to prevent users from swiping to disabled months) can cause the scroll position of the container to jump forwards or backwards. I have reported this bug to the Webkit team, and we will post on this issue when we have more to share.

Thank you! I am interested in the web kit issue, mind linking it? Thanks for all your work!

[averyjohnston]

Sure, here you are: https://bugs.webkit.org/show_bug.cgi?id=267876