Icon buttons can accrue excessive ripple effects

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Clicking or touching an icon button should show one ripple that disappears promptly

What is the current behavior?

Multiple rapid clicks can create stacked ripple effects that dissipate slowly

What are the steps to reproduce?

Open the button docs and rapidly click one of the icon buttons. Observe that the ripple effect grows very dark as multiple mat-ripple-element elements are created and attached to the mat-button-ripple. In a poor performance situation (slow system, patchy browser animation support, lots of background activity) this can be especially noticeable as each ripple takes multiple seconds to remove itself.

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

Impacts docs page as of today, so I think that’s 5.0.0-rc3? It seems to me that the fade out animation is choppier in Firefox than Chromium (and thus the stacking effect is more apparent).

Is there anything else we should know?

Just having the ripples stack isn’t such a big deal, but I have a page that’s doing intensive background work and it can easily see one or more ripples stick around for over 5 seconds, which is pretty confusing for the user. I think probably it makes sense to limit each button to a single ripple, but I don’t have a cite from the spec to back me up.

[thw0rted]

This example shows a mat-icon-button that triggers a mat-menu (while graphically-intensive stuff is happening out of frame).

As you can see, I’m opening and closing the menu multiple times consecutively, which hopefully the user wouldn’t do, but it highlights the stacking effect. Note that the GIF shows the ripples finally going away in real time – it’s a good 2 or 3 seconds after I close the menu for the last time before the last ripple disappears in the video, and it can be even worse that that sometimes in browser.

[angular-automatic-lock-bot[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.}