Merge pull request #18816 from twbs/fix-17308

Switch to actually-Safari-specific CSS hack for iOS temporal input fix

2 files changed, 19 insertions, 16 deletions

diff --git a/scss/.scss-lint.yml b/scss/.scss-lint.yml
index 06c6207d1..b736c3699 100644
--- a/scss/.scss-lint.yml
+++ b/scss/.scss-lint.yml
@@ -396,6 +396,7 @@ linters:
   SelectorFormat:
     enabled: true
     convention: hyphenated_lowercase # or 'BEM', or 'snake_case', or 'camel_case', or a regex pattern
+    ignored_types: ["element"]
 
   Shorthand:
     enabled: true
diff --git a/scss/_forms.scss b/scss/_forms.scss
index 0d5e364ec..6de81fcf8 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -92,26 +92,28 @@
 //
 // Note that as of 8.3, iOS doesn't support `week`.
 
-@media screen and (-webkit-min-device-pixel-ratio: 0) {
-  input[type="date"],
-  input[type="time"],
-  input[type="datetime-local"],
-  input[type="month"] {
-    &.form-control {
-      line-height: $input-height;
-    }
+// SCSS-Lint exemption until https://github.com/brigade/scss-lint/pull/672 gets merged
+// scss-lint:disable PseudoElement
+_::-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-sm,
+  .input-group-sm &.form-control {
+    line-height: $input-height-sm;
+  }
 
-    &.input-lg,
-    .input-group-lg &.form-control {
-      line-height: $input-height-lg;
-    }
+  &.input-lg,
+  .input-group-lg &.form-control {
+    line-height: $input-height-lg;
   }
 }
+// scss-lint:enable PseudoElement
 
 
 // Static form control text