(ripple): Ripple elements activate ripple when accidentally touched on scroll (mobile/touch)

material-components / material-components-web

Modular and customizable Material Design UI components for the web

https://material.io/develop/web

MIT License

17.14k stars 2.15k forks source link

(ripple): Ripple elements activate ripple when accidentally touched on scroll (mobile/touch) #1080

Open touficbatache opened 7 years ago

touficbatache commented 7 years ago

Bugs

What MDC-Web Version are you using?

0.16.0

What browser(s) is this bug affecting?

All touch browsers (Chrome for Android)

What OS are you using?

Android 7

What are the steps to reproduce the bug?

Run the demo server

Go to localhost:8080/list.html

Have a long list of items with ripple

Scroll with your finger (touch)

Observe the component's behavior

Go to https://codepen.io/anon/pen/BdpBWE

Scroll with your finger (touch)

What is the expected behavior?

You should be able to scroll normally.

What is the actual behavior?

Ripple launches on list items when your finger passes over them.

touficbatache commented 6 years ago

After diving into the code, setting needsDeactivationUX to true fixes the problem. However, the deactivation is not fully complete: you have to click again on the element to make it finish the deactivation process. Could you help @kfranqueiro & @acdvorak ?

colin-davis commented 6 years ago

I have also come across this issue and it still exists (very noticeable on mobile when scrolling over ripple objects). The codepen above illustrates this easily by using the chrome inspector mobile view and using the touch circle to scroll the list.

Currently the ripple fires immediately after touchstart, pointerdown, mousedown.

The ripple should only fire if the touch is an intentional tap and NOT: touch -> scroll -> release

Possible Improvement:

1) listen for touchdown (set flag 'scroll = false') 2) listen for touchmove (if moved set flag 'scroll = true')

(optional) calculate the distance from touchdown and only set the flag after a couple pixels of scrolling. 3) listen for touchend (if scroll is still false then trigger the ripple, if the flag is true then do nothing).

apollo13 commented 6 years ago

In the referenced codepen I also have the feeling that the ripple activates more than once when "clicking" on a touch device. Is that a result of slightly scrolling it? Or does it just register two taps? It would be great that a ripple couldn't be triggered again for a short period.

(I am not sure how to make a video on the module, any suggestions?)

lukaszciastko commented 3 years ago

Hi. Any progress on this?