fix(material-experimental/mdc-chips): ripple not being clipped in Safari (#16712)

crisbeto · mmalerba · commit 93aba14c5f5c · 2019-08-08T10:41:22.000-07:00
Fixes the ripple inside a `mat-chip` not clipping to the border radius in Safari.
diff --git a/src/material-experimental/mdc-chips/chips.scss b/src/material-experimental/mdc-chips/chips.scss
@@ -11,6 +11,8 @@
   cursor: default;
   // Needed to prevent mat-ripple from escaping the chip
   overflow: hidden;
+  // Required for the ripple to clip properly in Safari.
+  transform: translateZ(0);
 }
 
 // The MDC chip styles related to hover and focus states are intertwined with the MDC ripple styles.

Original file line number	Diff line number	Diff line change
`@@ -11,6 +11,8 @@`
`11`	`11`	`cursor: default;`
`12`	`12`	`// Needed to prevent mat-ripple from escaping the chip`
`13`	`13`	`overflow: hidden;`
	`14`	`+ // Required for the ripple to clip properly in Safari.`
	`15`	`+ transform: translateZ(0);`
`14`	`16`	`}`
`15`	`17`
`16`	`18`	`// The MDC chip styles related to hover and focus states are intertwined with the MDC ripple styles.`