From bafe3721bcb7c392e95e5e434b5bd1b824a4f91c Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sun, 19 Nov 2017 14:44:07 +0100
Subject: [PATCH] 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.
---
 src/lib/input/input.scss | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/lib/input/input.scss b/src/lib/input/input.scss
index 65992faf949a..24189244b233 100644
--- a/src/lib/input/input.scss
+++ b/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.