fix(ripple): remove webkit touch highlights from ripple containers

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

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 {

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

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;

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 {

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;