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 19, 2017
1 parent 0f954a0 commit 529c0bc
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;
}
}

// Note that we can't use something like visibility: hidden or
// display: none, because IE ends up preventing the user from
// focusing the input altogether.
Expand Down

0 comments on commit 529c0bc

Please sign in to comment.