From 67641714042f9b3833b84b55022df98b5c06114d Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sat, 23 Apr 2016 14:56:36 -0700
Subject: [PATCH] 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
---
scss/_forms.scss | 32 --------------------------------
scss/_reboot.scss | 12 ++++++++++++
2 files changed, 12 insertions(+), 32 deletions(-)
diff --git a/scss/_forms.scss b/scss/_forms.scss
index dc2ad9b4a5..0d22c15f07 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 4906cb470a..1eade02725 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;
--
GitLab