fix(button): improved tap responsiveness on mobile (#1792)

* fix(button): improved tap responsiveness on mobile

Improves the tap responsiveness of buttons on mobile by replacing the `::after` overlay with a DOM node that prevents the default touch action.
Previously, the `::after` overlay would capture the first tap, causing the button to have to tapped twice in order to fire it's click handler.

Fixes #1316.

Author: crisbeto

src/lib/button/_button-base.scss

@@ -3,24 +3,6 @@
 @import '../core/style/button-common';
 
 
-// Applies a focus style to an md-button element.
-@mixin md-button-focus {
-  &::after {
-    // The button spec calls for focus on raised buttons (and FABs) to be indicated with a
-    // black, 12% opacity shade over the normal color (for both light and dark themes).
-    // We do this by placing an :after pseudo-element with the appropriate shade over the button.
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    content: '';
-    background-color: rgba(black, 0.12);
-    border-radius: inherit;
-    pointer-events: none;
-  }
-}
-
 // Flat and raised button standards
 $md-button-padding: 0 16px !default;
 $md-button-min-width: 88px !default;
@@ -74,7 +56,9 @@ $md-mini-fab-padding: 8px !default;
   }
 
   &.md-button-focus {
-    @include md-button-focus();
+    .md-button-focus-overlay {
+      opacity: 1;
+    }
   }
 }
 

src/lib/button/_button-theme.scss

@@ -7,15 +7,15 @@
   $accent: map-get($theme, accent);
   $warn: map-get($theme, warn);
 
-  &.md-primary::after {
+  &.md-primary .md-button-focus-overlay {
     background-color: md-color($primary, 0.12);
   }
 
-  &.md-accent::after {
+  &.md-accent .md-button-focus-overlay {
     background-color: md-color($accent, 0.12);
   }
 
-  &.md-warn::after {
+  &.md-warn .md-button-focus-overlay {
     background-color: md-color($warn, 0.12);
   }
 }

src/lib/button/button.html

@@ -4,3 +4,5 @@
     [md-ripple-trigger]="getHostElement()"
     [md-ripple-color]="isRoundButton() ? 'rgba(255, 255, 255, 0.2)' : ''"
     md-ripple-background-color="rgba(0, 0, 0, 0)"></div>
+<!-- the touchstart handler prevents the overlay from capturing the initial tap on touch devices -->
+<div class="md-button-focus-overlay" (touchstart)="$event.preventDefault()"></div>

src/lib/button/button.scss

@@ -10,11 +10,13 @@
   // Only flat buttons and icon buttons (not raised or fabs) have a hover style.
   &:hover {
     // Use the same visual treatment for hover as for focus.
-    @include md-button-focus();
+    .md-button-focus-overlay {
+      opacity: 1;
+    }
   }
 
   &[disabled]:hover {
-    &.md-primary, &.md-accent, &.md-warn, &::after {
+    &.md-primary, &.md-accent, &.md-warn, .md-button-focus-overlay {
       background-color: transparent;
     }
   }
@@ -56,14 +58,26 @@
 }
 
 // The ripple container should match the bounds of the entire button.
-.md-button-ripple {
+.md-button-ripple, .md-button-focus-overlay {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
 }
 
+// Overlay to be used as a tint. Note that the same effect can be achieved by using a pseudo
+// element, however we use a proper DOM element in order to be able to disable the default
+// touch action. This makes the buttons more responsive on touch devices.
+.md-button-focus-overlay {
+  // The button spec calls for focus on raised buttons (and FABs) to be indicated with a
+  // black, 12% opacity shade over the normal color (for both light and dark themes).
+  background-color: rgba(black, 0.12);
+  border-radius: inherit;
+  pointer-events: none;
+  opacity: 0;
+}
+
 // For round buttons, the ripple container should clip child ripples to a circle.
 .md-button-ripple-round {
   border-radius: 50%;