Open simonziegler opened 4 years ago
Thanks for reporting!
This looks like an existing Safari bug (https://bugs.webkit.org/show_bug.cgi?id=68196), although I'm surprised we haven't encountered this before.
This resource recommends promoting the overflow
element to its own stacking context, and I've verified that adding z-index: 0
to the mdc-button__ripple
element fixes the bug.
That's an easy workaround for me. Is this something that you'll do for future MCW releases? Thanks!
We are working on adding this to MDC, although it may not be a quick fix as we need to sync this change in internally.
Thanks. It's pretty minor in impact and I'll probably have a zero radius theme anyway. Thought you should know though! BTW, I'm impressed by how responsive and helpful your team is - it's really impressive. Special shout out to @asyncLiz who's helped me a lot.
Hi, I just found that this happens for FABs too. Please see https://material-blazor.com/fab - on an iPhone or iPad of course. You can visit https://simonziegler.github.io/MaterialIssues/ to see this in action, along with what looks like a double bounce for the FAB, again on iOS.
The unbounded ripple in FABs has been corrected in Material Components Web 8.0.0, although FAB double bounce remains. I am yet to check regular buttons and will probably not have an opportunity for a couple of weeks.
This is also an issue for chips.
Bug report
Buttons with rounded corners have ripple extend to zero radius corners on either Safari on a Mac or an iPhone:
Steps to reproduce
Screenshots
Your Environment:
Further Information:
The "Red Rounded" theme's Sass variables can be found in our repo (click here) as: