MatButton with MatRipple works wrong in Safari 12.

[mokeev1995]

Button ripples works wrong in Safari. Ripples does not respect border-radius.

What is the expected behavior?

Ripples respects border-radius applied to button.

What is the current behavior?

Just hovered button:

Pressed button with ripples:

What are the steps to reproduce?

Place mat-button anywhere and press the button.

https://stackblitz.com/edit/angular-material2-issue-auuj1u

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

macOS Sierra 10.12.6
Safari 12
typescript: 3.2.2
@angular/animations: 7.2.8
@angular/cdk: 7.3.3
@angular/common: 7.2.8
@angular/compiler: 7.2.8
@angular/core: 7.2.8
@angular/material: 7.3.3

[mokeev1995]

Looks like bug #9416 (fixed in #9424) came back.

[crisbeto]

See #12311.

[mokeev1995]

@crisbeto thanks

[ristarr11]

Hello, I had similar issue with MDC Web, and this helped:
.mdc-button {
..
will-change: transform, opacity;
}

Not sure if this gonna break something else, though..

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}