fix(checkbox,radio): remove webkit tap highlights (#11349)

crisbeto · mmalerba · commit 4b2cc1a51bae · 2018-05-22T16:50:21.000-07:00
Removes the overlays that get added by mobile Webkit browsers when tapping on checkboxes and radio buttons. The overlays look weird, especially when combined with our ripples.
diff --git a/src/lib/checkbox/checkbox.scss b/src/lib/checkbox/checkbox.scss
@@ -187,6 +187,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
               mat-elevation-transition-property-value();
 
   cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .mat-checkbox-layout {
diff --git a/src/lib/radio/radio.scss b/src/lib/radio/radio.scss
@@ -9,6 +9,7 @@ $mat-radio-ripple-radius: 25px;
 // Top-level host container.
 .mat-radio-button {
   display: inline-block;
+  -webkit-tap-highlight-color: transparent;
 }
 
 // Inner label container, wrapping entire element.

Original file line number	Diff line number	Diff line change
`@@ -187,6 +187,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;`
`187`	`187`	`mat-elevation-transition-property-value();`
`188`	`188`
`189`	`189`	`cursor: pointer;`
	`190`	`+ -webkit-tap-highlight-color: transparent;`
`190`	`191`	`}`
`191`	`192`
`192`	`193`	`.mat-checkbox-layout {`
Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,7 @@ $mat-radio-ripple-radius: 25px;`
`9`	`9`	`// Top-level host container.`
`10`	`10`	`.mat-radio-button {`
`11`	`11`	`display: inline-block;`
	`12`	`+ -webkit-tap-highlight-color: transparent;`
`12`	`13`	`}`
`13`	`14`
`14`	`15`	`// Inner label container, wrapping entire element.`