fix(input): safari 15 webkit text alignment issue with input type date

[sean-perkins]

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)
• 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?

Date inputs on Safari 15 are center aligning text contents. This is due to a change in the appearance of input[type="date"] in Safari, that isn't aligned with the previous design considerations of ion-input.

Issue Number: #24197

What is the new behavior?

Text alignment of input[type="date"] pseudo element aligns left on LTR and right on RTL; only when used inside of ion-input.

Does this introduce a breaking change?

• Yes
• No

Other information

Repo used to replicate/isolate the bug: https://github.com/sean-perkins/24197-date-input-center

Likely this same issue should be resolved in Ionic 5.*.

[liamdebeasi]

Looks good. Let's make sure we are following the commit guidelines when merging: https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#subject

Maybe something like:

fix(input): date type in ion-input now aligns correctly on ios 15