bug: input type="time", "date", or "datetime-local" is not aligned in Safari (iOS and macOS)

[cmaas]

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

In Safari, the selected date is not aligned properly when using type="time":

<ion-list>
  <ion-item>
    <ion-input label="Set the time" type="time"></ion-input>
  </ion-item>
</ion-list>

Looks like this:

Tested on: Safari 16.5.1 macOS 13.4.1 iOS Safari 15.7.1 iOS Safari 17.0.3

Expected Behavior

Correct alignment

Steps to Reproduce

Load the testing URL in Safari (iOS, macOS)

Code Reproduction URL

https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0ALeBbKIANCAGYCWMYaA2qAHYCGuEamO+RIsA9nYn6wA87KAD4AOnQAEU4RAZIJ0mbPhl4MUQEleZWFIAqEMPEEB6NRohKVssLABOZAA7wp8AJ7OIAXnEhcbiQAVxh-KTAHWD8QHHhnMFQzM1gkOgwAKzAkaDIANwcMOgh4MzpnXDMAATJdWBTuBwgzJDITM1q6PQ66jGNcTLB-UXN7J1cbFUEoMjoAaykmqBiTD0osCBLwrCaSGLiEpJS0wZyZgqKSsorqzu6eJpSwMB6u2AwAI2C6JBgMWGe4TMk3MGwUSkEHyCHhBnQAtGCcg5JrZBPD4NxuFAPgwHFIeFBGjFnE5cLiPMNJLZqbJ0epNAAJbjMcx0qwoqavOEYrE45FU2RcxEQfnKNG8OE8PgQPj4qAMZ4xeHOBStOgAc0pylRzlEAHVoDxmO5uFIAMr8WAUKQAQWcznN8FxiEK5l1AtR8JmJg5NPFdDh6gguF9NKm8NmzmCbnlH2gMTNJXcG3cZGY4U83hianTIBGXMj0dDqILiBDHs5Xra8BBXKl-BrknMUKQMKbZhESkknEgMAQnSo6AAjAAWVAANjhQ4AHKghwB2EAAX0I9CYLHQg049Zl8FYy9XIEYzFY-2e294Df3S4AukugA

Ionic Info

Uses the CDN bundle (current version)

Additional Information

No response

[cmaas]

If I toggle display: inline-block in Safari's webdev tools, it works. However, the same CSS setting doesn't do anything if the input type istext. Weird. Video:

https://github.com/ionic-team/ionic-framework/assets/6094364/b3ae251f-0b20-4392-b7ee-93e8d78655c9

[cmaas]

This fixes it for now, for whatever reason:

input[type=time].native-input {
    align-self: center;
}

[thetaPC]

Thank you for submitting the issue! I was able to reproduce the bug on Safari 15, 16, and 17. This is also happening for an input with the type date and datetime-local. The issue is being caused by the pseudo selector that Safari adds to these types.

[cmaas]

Here's another weird demo.

I explicitly set the class ion-text-right to all three elements. The right-alignment works on macOS (Safari, Firefox, Chrome), but fails on an iPhone with iOS 17 (Safar) as well as a Google Pixel (latest Chrome). I don't know why, but presumably, some pseudo selector stuff interferes here as well, except this time, also in Chrome 😵‍💫 (in Safari, the vertical alignment problem comes on top).

[mapsandapps]

Hi, thank you for submitting this issue. This bug appears to have been fixed in Ionic Framework 7.6.0. Please let me know if you're still experiencing issues after updating to the latest version.

7.5	7.6

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.