[Button] ripple improperly renders on an iPhone (Safari)

[simonziegler]

Bug report

Buttons with rounded corners have ripple extend to zero radius corners on either Safari on a Mac or an iPhone:

• Ripple styling is improper for the Text and Outlined button styles - ripple extends to zero radius corners.
• Styling is correct for the Contained and Raised button styles - ripple is properly contained within rounded corners.

Steps to reproduce

1. Visit https://blazormdc.com/button on an iphone (or maybe an ipad)
2. Click the scroll icon button at the right hand end of the top app bar and select "Red Round Theme"
3. Scroll down to the second card on the screen entitled "Button Styles" (see screenshot below)
4. The first three buttons in the image below show the improper ripple styling
5. The last two buttons show the correct styling
6. This issue was repeated:
   • Safari on a Mac running MacOS
   • All broswers on an iPhone running iOS
7. The issue does not occur on:
   • Any browser on a PC (Chrome, Edgium, Brave and Firefox tested)
   • Chrome on a Mac

Screenshots

Your Environment:

Software	Version(s)
MDC Web	7.0.0
Browser	Safari Brave and Edge on iPhone or Safari on a Mac
Operating System	iOS 13.6, MacOS - unsure of build

Further Information:

The "Red Rounded" theme's Sass variables can be found in our repo (click here) as:

@use '@material/theme/color-palette' as cp;

$mdc-theme-primary: cp.$red-800;
$mdc-theme-secondary: cp.$cyan-300;
$mdc-theme-background: cp.$grey-200;

$mdc-typography-font-family: unquote("Merriweather, serif");
$mdc-typography-styles-button: ( font-size: 14px, font-weight: 400, letter-spacing: 0.05em, );

$mdc-typography-styles-headline1: ( font-family: unquote("Shrikhand, serif") );
$mdc-typography-styles-headline2: ( font-family: unquote("Shrikhand, serif") );
$mdc-typography-styles-headline3: ( font-family: unquote("Shrikhand, serif") );
$mdc-typography-styles-headline4: ( font-family: unquote("Shrikhand, serif") );
$mdc-typography-styles-headline5: ( font-family: unquote("Shrikhand, serif") );
$mdc-typography-styles-headline6: ( font-family: unquote("Shrikhand, serif") );

$mdc-shape-small-component-radius: 50%;
$mdc-shape-large-component-radius: 50%;

[joyzhong]

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.

[simonziegler]

That's an easy workaround for me. Is this something that you'll do for future MCW releases? Thanks!

[joyzhong]

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.

[simonziegler]

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.

[simonziegler]

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.

[simonziegler]

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.

[simonziegler]

This is also an issue for chips.