From 43a1588864c13eb658ce99c8f30cbf8ca3fb2c60 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 25 Mar 2022 19:30:31 +0100 Subject: [PATCH] fix(material/chips): ripple not clipped on safari (#21495) Fixes that the chip ripple wasn't being clipped to the border radius on Safari. This was fixed initially in #12244, but it seems to have regressed. Moving the `transform` to the ripple container seems to fix it. --- src/material/chips/chips.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/material/chips/chips.scss b/src/material/chips/chips.scss index 4dfeb723ea42..c37e9ef97c43 100644 --- a/src/material/chips/chips.scss +++ b/src/material/chips/chips.scss @@ -30,9 +30,6 @@ $chip-remove-size: 18px; box-sizing: border-box; -webkit-tap-highlight-color: transparent; - // Required for the ripple to clip properly in Safari. - transform: translateZ(0); - // Chips could be set on buttons so we need to reset the user agent styles. border: none; -webkit-appearance: none; @@ -200,6 +197,9 @@ $chip-remove-size: 18px; // Ensures that the ripple effect doesn't overflow the ripple target. overflow: hidden; + + // Required for the ripple to clip in Safari. + transform: translateZ(0); } .mat-chip-list-wrapper {