Material-components-web: [Button] Ripple doesn't respect border-radius on Safari

[CiriousJoker]

Bug report

On Safari (iOS as well as Mac), the ripple around a button doesn't respect border radius during the animation.

Steps to reproduce

1. Open the demo
2. Click each button in Chrome (normal behavior, everything perfect)
3. Click each button in Safari

Your Environment:

| Software | Version(s) |
| ---------------- | ---------- |
| MDC Web | 4.0.0
| Browser | Chrome (latest stable) / Safari (Release 96 (Safari 13.1, WebKit 15609.1.9.7))
| Operating System | MacOS

Possible solution

Probably a bug in the browser engine.

This bug was introduced during v2.1.1.

I've tried with previous versions (0.40, 1.0.0, 2.1.0 and a few others) and they all work great.

Note that the codepen has v2.1.1 of the css enabled together with the latest js (4.0.0).

Also, I've changed the border radius to 999px to emphasize the effect, but it's the same for the default radius of 4px (just harder to see).

[CiriousJoker]

Woops, I just noticed I didn't change the default issue title.

[allan-chen]

Hi,

I was able to reproduce this bug in Safari. A possibility might be reverting the change from 2.1.1, as long as it does not re-introduce the bug it was intended to fix for chrome 74 at the time (black artifact on ripple surface on hover).

[steffdimitrov]

Hello @CiriousJoker
You can try with this:

.mdc-button, .mdc-button__ripple {
  border-radius: 20px !important;
  -webkit-mask-image: radial-gradient(white, black);
}

-webkit-mask-image with gradient fix it for me.

[CiriousJoker]

@steffdimitrov Thanks, I'll report back if it worked (might take a while though)