trimox / angular-mdc-web

Angular wrapper for Material Design (Web) Components
https://trimox.github.io/angular-mdc-web
MIT License
518 stars 87 forks source link

Ripple Effects on components with border radius is not rounded on Safari Browser #2192

Open adrianclaudiudima opened 4 years ago

adrianclaudiudima commented 4 years ago

Description

On Safari browser all ripple effects on all components do not support border radius. I saw this is reproducible on the Material Design styles library itself. (https://material-theme-builder.glitch.me)

Steps to reproduce the behavior:

Using the Safari browser, navigate on any components which have border radius and look at the ripple effects on clicked buttons / lists which do support interaction (https://trimox.github.io/angular-mdc-web/#/angular-mdc-web/fab-demo/examples)

Expected behavior All components which have border radius (buttons, lists, icons) with ripple effect, the ripple effect should also have border radius. On Chrome / Mozila ripple effect is displayed correctly.

Angular MDC Version :

Reproducible on any version

Operating system / Browser

OS : macOS Catalina, version 10.15.4 Safari : Version 13.1 (15609.1.20.111.8)

Screenshots

Screenshot 2020-04-05 at 13 38 20 Screenshot 2020-04-05 at 13 38 08