Ripple animation on some controls has jagged edges

[wuchtig]

Bug, feature request, or proposal:

Ripple animation on mat-radio-button, mat-checkbox and mat-slide-toggle has jagged edges.

What is the expected behavior?

The round ripple should be smooth.

What is the current behavior?

What are the steps to reproduce?

Look at Material Demo Site Checkbox, RadioButton or SlideToggle.

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

MSEdge: 41.16299.15.0
Material: 5.0.0-rc0-3ca801a

[jelbourn]

@devversion is this just an Edge thing?

[devversion]

I was able to reproduce this in Edge and it's makes the ripples on all of those components really unelegant. We can fix this by no longer clipping the ripples using border-radius.

Ripples are circular by default and since the ripples are always centered we can just use the default radius of those.

[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.}