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.
angular · Aug 25, 2018 · 90e4db7 · 90e4db7
1 parent 3723191
commit 90e4db7
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/src/lib/button-toggle/button-toggle.scss b/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;

diff --git a/src/lib/button/button.scss b/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