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

Fixes the ripples on buttons and button toggles not being clipped to the border radius in Safari.

Relates to #12244.

Author: crisbeto

src/lib/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;
   }

src/lib/button/button.scss

@@ -106,6 +106,11 @@
   border-radius: inherit;
 }
 
+.mat-button-ripple {
+  // Fixes the ripples not being clipped to the border radius on Safari.
+  transform: translateZ(0);
+}
+
 // Element that overlays the button to show focus and hover effects.
 .mat-button-focus-overlay {
   opacity: 0;