search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.43k stars 32.16k forks source link

Ripples fire on drag/swipe on iOS and Android #2165

Closed gmaclennan closed 8 years ago

gmaclennan commented 8 years ago

When scrolling a ListItem or Button on iOS or Android touch ripples fire wherever I touch to drag / scroll the screen. This gives a pretty bad user experience while scrolling a list.

Using Chrome 46.0.2490.76 on Android 4.4.4 and Safari on iOS 9.1

Is there a way to disable ripple effects altogether?

svk31 commented 8 years ago

I added Fastclick to my project to remove the 300ms click delay. Besides making the iOS version feel a LOT faster, it had the added benefit of removing the double ripples. You could try that out.

https://github.com/ftlabs/fastclick

owencm commented 8 years ago

The ripples in lists when scrolling have always bothered me too, and don't match material implementations on Android so I think it's fair to say this is a bug.

This also causes scroll performance issues since we're then listening to touch events while scrolling.

I suggest we delay the ripple by some milliseconds and then don't trigger the ripple and remove event listeners if the user appears to be scrolling. Further if we detect scrolling during ripples we should abort, as is done on Android.

I think this will improve UX but also improve scrolling perf dramatically.

I'd like to send a PR for this if I get time, but if somebody else is interested then don't wait for me!

owencm commented 8 years ago

FYI I have submitted PR #3407 to fix this issue. Will wait to see the feedback, but hopefully can get this fixed soon.