fix(material/core): ripples not being clipped on safari in shadow dom (#24029)

Author: crisbeto

src/material/core/ripple/_ripple.scss

@@ -30,7 +30,10 @@
     pointer-events: none;
 
     transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);
-    transform: scale(0);
+
+    // We use a 3d transform here in order to avoid an issue in Safari where
+    // the ripples aren't clipped when inside the shadow DOM (see #24028).
+    transform: scale3d(0, 0, 0);
 
     // In high contrast mode the ripple is opaque, causing it to obstruct the content.
     @include a11y.high-contrast(active, off) {

src/material/core/ripple/ripple-renderer.ts

@@ -138,7 +138,9 @@ export class RippleRenderer implements EventListenerObject {
     // ripple elements. This is critical because then the `scale` would not animate properly.
     enforceStyleRecalculation(ripple);
 
-    ripple.style.transform = 'scale(1)';
+    // We use a 3d transform here in order to avoid an issue in Safari where
+    // the ripples aren't clipped when inside the shadow DOM (see #24028).
+    ripple.style.transform = 'scale3d(1, 1, 1)';
 
     // Exposed reference to the ripple that will be returned.
     const rippleRef = new RippleRef(this, ripple, config);