Avoid hacking around the temporal input bug in iOS

- Rather than use CSS hacks, let's avoid needing to hack anything
- Creates a new Reboot entry to simply reset the appear of the temporal inputs, thereby avoiding the problem entirely
- Less than ideal for conveying affordance on iOS, but given bugginess of the input itself, seems a decent tradeoff

2 files changed, 12 insertions, 32 deletions

diff --git a/scss/_forms.scss b/scss/_forms.scss
index dc2ad9b4a..0d22c15f0 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -118,38 +118,6 @@ select.form-control {
 }
 
 
-// Todo: clear this up
-
-// Special styles for iOS temporal inputs
-//
-// In Mobile Safari, setting `display: block` on temporal inputs causes the
-// text within the input to become vertically misaligned. As a workaround, we
-// set a pixel line-height that matches the given height of the input, but only
-// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
-//
-// Note that as of 8.3, iOS doesn't support `week`.
-
-_::-webkit-full-page-media, // Hack to make this CSS be Safari-only; see http://browserbu.gs/css-hacks/webkit-full-page-media/
-input[type="date"],
-input[type="time"],
-input[type="datetime-local"],
-input[type="month"] {
-  &.form-control {
-    line-height: $input-height;
-  }
-
-  &.input-sm,
-  .input-group-sm &.form-control {
-    line-height: $input-height-sm;
-  }
-
-  &.input-lg,
-  .input-group-lg &.form-control {
-    line-height: $input-height-lg;
-  }
-}
-
-
 // Static form control text
 //
 // Apply class to an element to make any string of text align with labels in a
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 4906cb470..1eade0272 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -317,6 +317,18 @@ textarea {
   border-radius: 0;
 }
 
+input[type="date"],
+input[type="time"],
+input[type="datetime-local"],
+input[type="month"] {
+  // Remove the default appearance of temporal inputs to avoid a Mobile Safari
+  // bug where setting a custom line-height prevents text from being vertically
+  // centered within the input.
+  //
+  // Bug report: https://github.com/twbs/bootstrap/issues/11266
+  -webkit-appearance: listbox;
+}
+
 textarea {
   // Textareas should really only resize vertically so they don't break their (horizontal) containers.
   resize: vertical;