fix(form-field): unable to tap on certain types of inputs on iOS

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 #8001.

Author: crisbeto

src/lib/input/input.scss

@@ -37,6 +37,25 @@
     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.
   @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.