From 8e2ff1fbeb7e620c375d5d9b20102441dce9fbba Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Wed, 11 Jul 2018 17:04:43 +0200
Subject: [PATCH] fix(ripple): remove webkit touch highlights from ripple
 containers (#12082)

Since the ripples are feedback enough that the element was touched, we should disable the native feedback on touch devices so it doesn't overlap with the ripples. These changes go through the various clickable ripple triggers and remove the Webkit highlighting.
---
 src/lib/button-toggle/button-toggle.scss  | 1 +
 src/lib/chips/chips.scss                  | 1 +
 src/lib/core/option/option.scss           | 1 +
 src/lib/list/list.scss                    | 1 +
 src/lib/stepper/step-header.scss          | 1 +
 src/lib/tabs/tab-nav-bar/tab-nav-bar.scss | 1 +
 6 files changed, 6 insertions(+)

diff --git a/src/lib/button-toggle/button-toggle.scss b/src/lib/button-toggle/button-toggle.scss
index ece5c9d34ae..0d9623b3cc0 100644
--- a/src/lib/button-toggle/button-toggle.scss
+++ b/src/lib/button-toggle/button-toggle.scss
@@ -42,6 +42,7 @@ $mat-button-toggle-border-radius: 2px !default;
 .mat-button-toggle {
   white-space: nowrap;
   position: relative;
+  -webkit-tap-highlight-color: transparent;
 
   // Similar to components like the checkbox, slide-toggle and radio, we cannot show the focus
   // overlay for `.cdk-program-focused` because mouse clicks on the <label> element would be always
diff --git a/src/lib/chips/chips.scss b/src/lib/chips/chips.scss
index a6c37368549..e8f64f303d6 100644
--- a/src/lib/chips/chips.scss
+++ b/src/lib/chips/chips.scss
@@ -24,6 +24,7 @@ $mat-chip-remove-size: 18px;
   position: relative;
   overflow: hidden;
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .mat-standard-chip {
diff --git a/src/lib/core/option/option.scss b/src/lib/core/option/option.scss
index 8cc84151b76..bb8789c52ed 100644
--- a/src/lib/core/option/option.scss
+++ b/src/lib/core/option/option.scss
@@ -13,6 +13,7 @@
   max-width: 100%;
   box-sizing: border-box;
   align-items: center;
+  -webkit-tap-highlight-color: transparent;
 
   &[aria-disabled='true'] {
     @include user-select(none);
diff --git a/src/lib/list/list.scss b/src/lib/list/list.scss
index b1fecb6124c..b8995fa1a66 100644
--- a/src/lib/list/list.scss
+++ b/src/lib/list/list.scss
@@ -41,6 +41,7 @@ $mat-list-item-inset-divider-offset: 72px;
   // being `inline` by default.
   display: block;
   height: $base-height;
+  -webkit-tap-highlight-color: transparent;
 
   .mat-list-item-content {
     display: flex;
diff --git a/src/lib/stepper/step-header.scss b/src/lib/stepper/step-header.scss
index ac1efa6340c..a1516987f67 100644
--- a/src/lib/stepper/step-header.scss
+++ b/src/lib/stepper/step-header.scss
@@ -14,6 +14,7 @@ $mat-step-header-icon-size: 16px !default;
   cursor: pointer;
   position: relative;
   box-sizing: content-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .mat-step-optional {
diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.scss b/src/lib/tabs/tab-nav-bar/tab-nav-bar.scss
index fce473be3d9..9c3727f04ef 100644
--- a/src/lib/tabs/tab-nav-bar/tab-nav-bar.scss
+++ b/src/lib/tabs/tab-nav-bar/tab-nav-bar.scss
@@ -18,6 +18,7 @@
   text-decoration: none;  // Removes anchor underline styling
   position: relative;
   overflow: hidden;  // Keeps the ripple from extending outside the element bounds
+  -webkit-tap-highlight-color: transparent;
 
   [mat-stretch-tabs] & {
     flex-basis: 0;