fix(button-toggle): ripples not clipping correctly in safari

crisbeto · crisbeto · commit fe9fc4666447 · 2022-03-25T14:41:14.000+01:00
Fixes the ripples on button toggles not being clipped to the border radius in Safari. Relates to #12244.
diff --git a/src/material/button-toggle/button-toggle.scss b/src/material/button-toggle/button-toggle.scss
@@ -19,6 +19,9 @@ $legacy-border-radius: 2px !default;
   border-radius: $legacy-border-radius;
   -webkit-tap-highlight-color: transparent;
 
+  // Fixes the ripples not being clipped to the border radius on Safari.
+  transform: translateZ(0);
+
   @include a11y.high-contrast(active, off) {
     outline: solid 1px;
   }

Original file line number	Diff line number	Diff line change
`@@ -19,6 +19,9 @@ $legacy-border-radius: 2px !default;`
`19`	`19`	`border-radius: $legacy-border-radius;`
`20`	`20`	`-webkit-tap-highlight-color: transparent;`
`21`	`21`
	`22`	`+ // Fixes the ripples not being clipped to the border radius on Safari.`
	`23`	`+ transform: translateZ(0);`
	`24`	`+`
`22`	`25`	`@include a11y.high-contrast(active, off) {`
`23`	`26`	`outline: solid 1px;`
`24`	`27`	`}`