Add touch-action:manipulation on interactive elements to avoid 300ms click delay

Fixes #18044

[skip sauce]
[skip validator]

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 37ad14ddd7243f9543b6ca3f64b72378ccf18dbf..f82f43305dad6c371814966121d1d649f236acf8 100644 (file)
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -8,7 +8,6 @@
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
-  touch-action: manipulation;
   cursor: pointer;
   user-select: none;
   border: $border-width solid transparent;

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 58fd54c6833e2bb87cc4794f6481524880c9cc2a..2dddf5f1db8e97bffdc00b7272d1247e1fcf8c49 100644 (file)
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -206,6 +206,28 @@ img {
   cursor: pointer;
 }
 
+
+// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
+//
+// In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
+// DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present.
+// However, they DO support removing the click delay via `touch-action: manipulation`.
+// See:
+// * http://caniuse.com/#feat=css-touch-action
+// * http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
+
+a,
+area,
+button,
+[role="button"],
+input,
+label,
+select,
+summary,
+textarea {
+  touch-action: manipulation;
+}
+
 //
 // Tables
 //