Skip to content

Commit

Permalink
fix(form-field): unable to tap on certain types of inputs on iOS
Browse files Browse the repository at this point in the history
Fixes an issue that caused certain input types to collapse into 1px tall strips, preventing users from being to tap on them on iOS.

Fixes angular#8001.
  • Loading branch information
crisbeto committed Nov 29, 2017
1 parent 9e35bf0 commit 288238e
Showing 1 changed file with 16 additions and 0 deletions.
16 changes: 16 additions & 0 deletions src/lib/input/input.scss
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,22 @@
display: none;
}

// Fixes an issue on iOS where the following input types will collapse to 1px,
// if they're empty, because we've overridden their background color.
// See: https://stackoverflow.com/questions/18381594/input-type-date-appearance-in-safari-on-ios
&[type='date'],
&[type='datetime'],
&[type='datetime-local'],
&[type='month'],
&[type='week'],
&[type='time'] {
&::after {
content: ' ';
white-space: pre;
width: 1px;
}
}

@include input-placeholder {
// Delay the transition until the label has animated about a third of the way through, in
// order to prevent the placeholder from overlapping for a split second.
Expand Down

0 comments on commit 288238e

Please sign in to comment.