Fix date input height on iOS Safari 18.4–18.6#47923
Open
spider-yamet wants to merge 6 commits intomui:masterfrom
Open
Fix date input height on iOS Safari 18.4–18.6#47923spider-yamet wants to merge 6 commits intomui:masterfrom
spider-yamet wants to merge 6 commits intomui:masterfrom
Conversation
Netlify deploy previewhttps://deploy-preview-47923--material-ui.netlify.app/ Bundle size report
|
Author
|
hi @mj12albert could you please review my PR? :) |
mj12albert
reviewed
Mar 14, 2026
Member
mj12albert
left a comment
mj12albert
left a comment
There was a problem hiding this comment.
Given that this is a WebKit bug we should just do a pure CSS fix in the InputBase styles (using the attr selectors &[type="date"], &[type="time"], &[type="datetime-local"] etc) without touching the existing API/classes
mj12albert
reviewed
Mar 14, 2026
| { | ||
| props: ({ ownerState }) => isTemporalInputType(ownerState.type), | ||
| style: { | ||
| minHeight: '1.4375em', |
Member
There was a problem hiding this comment.
Doesn't height work https://bugs.webkit.org/show_bug.cgi?id=198959#c2
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes shrunken height of
TextFieldwithtype="date"(and other temporal types) on small iOS devices (iPhone SE, iPhone 16e) on iOS 18.4–18.6.Closes #47733
Problem
On iOS Safari (and Chrome on iOS),
<TextField type="date" />and other temporal inputs (time,datetime-local,month,week) can render with collapsed height compared to text inputs. Root cause: WebKit bug 198959 and Safari’s shadow DOM padding for native date/time controls.Solution
inputTypeTemporalvariant that:minHeight: 1.4375emon the input and::-webkit-date-and-time-valueso the field doesn’t collapse when empty.padding: 0on WebKit temporal pseudo-elements (::-webkit-datetime-edit*, etc.) so height matches other inputs.::-webkit-inner-spin-button { height: auto }for the native picker icon.isTemporalInputType) used in overrides resolver and utility classes.inputTypeTemporaland non-temporal types do not.Files changed
packages/mui-material/src/InputBase/InputBase.js– temporal detection + styled variantpackages/mui-material/src/InputBase/inputBaseClasses.ts–inputTypeTemporalclass##Fixes
#47733