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

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%;

[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]

This is also an issue for chips.