From 5a7571543f095435c6788154b49f442821c1b8ac Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 25 Mar 2022 15:16:00 +0100 Subject: [PATCH] fix(material/button-toggle): ripples not clipping correctly in safari Fixes the ripples on button toggles not being clipped to the border radius in Safari. Relates to #12244. --- 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; }