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

@@ -13,9 +13,11 @@ $mat-button-toggle-border-radius: 2px !default;
   position: relative;
   display: inline-flex;
   flex-direction: row;
-
   border-radius: $mat-button-toggle-border-radius;
 
+  // Fixes the ripples not being clipped to the border radius on Safari.
+  transform: translateZ(0);
+
   cursor: pointer;
   white-space: nowrap;
   overflow: hidden;

src/lib/button/button.scss

@@ -91,6 +91,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 {
   // The button spec calls for focus on raised buttons (and FABs) to be indicated with a