bug: ion-datetime duplicates some months when below a certain year on iOS 14

[denisaSeghedi123]

Prerequisites

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

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

Using ion-datetime (ios v12 and v14), for month selector, September is displayed twice.
This issue does not occur for ios v15.

Expected Behavior

display October instead of September twice

Steps to Reproduce

1. click on month-year dropdown to show the options
2. scroll down on month column options

Code Reproduction URL

No response

Ionic Info

No response

Additional Information

No response

[averyjohnston]

Thanks for the issue. I'm unable to replicate on an iPhone running iOS 14.7.1. Could you create a starter app reproducing the problem and post a link to the repo here? Also, what precise versions of iOS have you tested on so far?

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[denisaSeghedi123]

Thanks for the issue. I'm unable to replicate on an iPhone running iOS 14.7.1. Could you create a starter app reproducing the problem and post a link to the repo here? Also, what precise versions of iOS have you tested on so far?

I used ios 12.5.4 and ios 14.2

[denisaSeghedi123]

https://github.com/denisaSeghedi123/ion-datetime-issue

Run the following commands:

• npm install
• npm install -g native-run
• ionic cordova emulate ios (open an iPod touch 7th generation - iOS 14.2)

Steps to reproduce

• Click on Date label (a modal is open)
• Click on arrow icon for month/year
• Scroll down to 1995 (the issue occurs if the year is below 1996)
• Scroll down to September (you’ll see September is displayed twice)

[averyjohnston]

Thanks for the extra details! Particularly about the year needing to be below a certain point. I was able to replicate this issue on Xcode Simulator. I was also able to see it in core, meaning it's likely happening in all frameworks, not just Angular.

Interestingly, I see it when the year is at 2006 or earlier, and for me it duplicates March and October. The selected month is also a bit buggy when in this state. Screencast here.

I tried it on 14.2 and 14.3 and replicated both times, even on an iPhone 8. And to summarize from before, I didn't see the issue on my actual iPhone running iOS 14.7.

For context, Ionic v6 doesn't support iOS versions lower than 13: https://ionicframework.com/docs/reference/browser-support