Skip to content

Commit b833f0e

Browse files
fix(alert): date inputs render correctly in mobile safari (#28495)
Issue number: resolves #28494 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> The appearance of the input is being set to `none` which clears the browser appearance settings for height on the control. This results in the `<input type="date" />` to render without a height. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Minimum height is assigned to the alert input, forcing it to render at it's expected height - Date input renders correctly in Mobile Safari ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> We have screenshots for this component, but Playwright runs an emulation of Mobile Safari that does not reproduce this issue that is only present on device. There for we cannot write a test on this change. --------- Co-authored-by: ionitron <[email protected]>
1 parent 7392b1c commit b833f0e

File tree

3 files changed

+11
-0
lines changed

3 files changed

+11
-0
lines changed

core/src/components/alert/alert.ios.scss

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,17 @@
105105
&::-ms-clear {
106106
display: none;
107107
}
108+
109+
&::-webkit-date-and-time-value {
110+
/**
111+
* The -webkit-date-and-time-value pseudo element is used
112+
* to style the date/time input on iOS/Mobile Safari.
113+
* To avoid layout shift between an empty state and a selected state,
114+
* we set the height `18px` to match the native input height for
115+
* date/time inputs on iOS/Mobile Safari.
116+
*/
117+
height: 18px;
118+
}
108119
}
109120

110121

2 Bytes
Loading
-17 Bytes
Loading

0 commit comments

Comments
 (0)