From 529c0bc722c2be03ca3112acdb30b4470784462a 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 | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/lib/input/input.scss b/src/lib/input/input.scss
index 6fe27e42aee2..65d1802caa78 100644
--- a/src/lib/input/input.scss
+++ b/src/lib/input/input.scss
@@ -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.