From c677f11ed8b9a268a307488dca26589dfd9412da Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Fri, 25 Mar 2022 19:11:58 +0100
Subject: [PATCH] fix(material/button-toggle): ripples not clipping correctly
 in safari (#12311)

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

Relates to #12244.

(cherry picked from commit 938d7870a78391f6db491091b07359ea1b39124c)
---
 src/material/button-toggle/button-toggle.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/material/button-toggle/button-toggle.scss b/src/material/button-toggle/button-toggle.scss
index 989346841cbc..1c91ff2c4286 100644
--- 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;
   }