Components: Ripple effects of list items are stacking on scrolling in mobile

[armaserg]

actually it is duplicate of https://github.com/angular/material2/issues/10082
but I don't know how to "ReOpen" that ticket. So...

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Ripple effects of list items shouldn't stack on scrolling in mobile. Ideally, effect even shouldn't be visible when you scroll list. It should be visible only on "tap" (like menu in Google Chrome).

What is the current behavior?

Please see video: https://youtu.be/O_H2MG8Torw

What are the steps to reproduce?

Is reproducible on https://material.angular.io/
Steps to reproduce:
1) Go to https://material.angular.io/guides ON MOBILE DEVICE using Chrome
2) Click on any link (for example "Getting started")
3) Click Back button on device
4) Try to scroll list quickly
5) You'll see "stack" of ripples

What is the use-case or motivation for changing an existing behavior?

It doesn't look good. In Some scenarios it looks horrible :(

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

My site uses [email protected] and [email protected] but behavior same as on https://material.angular.io/

[kasiselvamk]

Go to https://material.angular.io/components/ripple/examples ON MOBILE DEVICE using Chrome
try to scroll ; you can see this.
can you help fixing this. any workaround ?

[skullacy]

+1

[lukaszciastko]

Any update on this? I wanted to use Angular Material for my project, created a simple PoC and hit this ugly issue...