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

Fixes #18044

[skip sauce]
[skip validator]
This commit is contained in:
Chris Rebert 2015-10-24 20:26:06 -07:00
parent 6d591edcb7
commit 25e42ade42
2 changed files with 22 additions and 1 deletions

View File

@ -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;

View File

@ -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
//