Switch to actually-Safari-specific CSS hack when fixing vertical alignment of temporal input text in iOS Safari

See http://browserbu.gs/css-hacks/webkit-full-page-media/
Fixes #17308

[skip sauce]
[skip validator]

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

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