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

crisbeto · crisbeto · commit 422ad436c5de · 2019-06-04T21:35:02.000+02:00
Fixes the ripples on buttons and 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
@@ -20,6 +20,9 @@ $mat-button-toggle-legacy-border-radius: 2px !default;
   border-radius: $mat-button-toggle-legacy-border-radius;
   -webkit-tap-highlight-color: transparent;
 
+  // Fixes the ripples not being clipped to the border radius on Safari.
+  transform: translateZ(0);
+
   @include cdk-high-contrast {
     outline: solid 1px;
   }

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