fix(chips): ripple not clipping correctly in safari (angular#12244)

crisbeto · roboshoes · commit fcba9f88904a · 2018-10-23T14:50:48.000-07:00
Fixes the ripple on a `mat-chip` not being clipped to the rounded corners on Safari.
diff --git a/src/lib/chips/chips.scss b/src/lib/chips/chips.scss
@@ -29,6 +29,9 @@ $mat-chip-remove-size: 18px;
   overflow: hidden;
   box-sizing: border-box;
   -webkit-tap-highlight-color: transparent;
+
+  // Required for the ripple to clip properly in Safari.
+  transform: translateZ(0);
 }
 
 .mat-standard-chip {

Original file line number	Diff line number	Diff line change
`@@ -29,6 +29,9 @@ $mat-chip-remove-size: 18px;`
`29`	`29`	`overflow: hidden;`
`30`	`30`	`box-sizing: border-box;`
`31`	`31`	`-webkit-tap-highlight-color: transparent;`
	`32`	`+`
	`33`	`+ // Required for the ripple to clip properly in Safari.`
	`34`	`+ transform: translateZ(0);`
`32`	`35`	`}`
`33`	`36`
`34`	`37`	`.mat-standard-chip {`