Materialize: Waves effect triggered when user touches and drags the element on mobile screen to scroll the page

[favoyang]

Description

Waves effect triggered when user drags the element on mobile screen to scroll the page. It's quite common when applying the wave effect to a card component, which may cover bigger area of mobile screen.

Repro Steps

Open http://materializecss.com/cards.html on mobile device, nav to "Card Reveal" section and drag it to scroll.

[Dogfalo]

I believe this is standard material behavior. You can see it happen in the
Android system notifications panel
On Sat, Dec 24, 2016 at 4:14 AM Favo Yang [e-mail] wrote:

Description

Waves effect triggered when user drags the element on mobile screen to
scroll the page. It's quite common when applying the wave effect to a card
component, which may cover bigger area of mobile screen.

Repro Steps

Open http://materializecss.com/cards.html on mobile device, nav to "Card
Reveal" section and drag it to scroll.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/Dogfalo/materialize/issues/4027, or mute the thread
https://github.com/notifications/unsubscribe-auth/ACpax64p0tSVN3yC7LphpjPdM1brXzSzks5rLOJkgaJpZM4LVMUS
.

[favoyang]

New to material design, please correct me if I'm wrong.

On mobile screen when an user starts scrolling a page by dragging any place on the screen, the purpose is clearly to navigate more page content. But if the user presses on a button or a card, the wave effect been triggered, it looks like a mistake by the user. Because the UI try to tell the user something else happens accidentally. And even worse, the element that is moving out of screen try to get your attention. It's not a bit deal for small button, you barely noticed the wave effect, but quite notable for bigger element on the screen.

See the demo gif.

[Dogfalo]

What is your preferred behavior? There isn't a way to know if someone is going to just tap or tap then drag to scroll.

[favoyang]

Move the wave effect to touchend event handler, then you can detect it's a tap or a drag (by recording the touch position in touchstart event first).

[Dogfalo]

The wave that appears on tap is there to let the user know that the object is clickable. Having the effect on touchend would prevent that.

[favoyang]

How about setup a a very short timer to check the tap-vs-drag logic? Same idea to solve other tap-vs-drag issue on mobile, like when you tap on a tableview cell and start dragging, the tableview cell won't get highlighted.

[Creativenauts]

I too have an issue with the way the waves effect functions while user is scrolling. I have checked many apps on my android device and I cannot find a single app that has this same type of effect. Touchend seems like a good solution but that defeats the purpose of letting the user know that an element is clickable if they tap and hold an element. Perhaps timer is the way to go but who wants to dirty up the dom with that... not me. I will see if I can find a remedy that doesn't sacrifice user experience.

[siburny]

Actually, this is the behavior that I can find in all Google apps (Inbox, Play Store, Play Music, etc). It's slightly different though. When you tap an area you do see the wave effect, BUT as soon as you start scrolling wave effect fades away (disappears).

[horacehylee]

@siburny That should be the solution, Google Play also uses it.

[Dahkon]

I agree to the last solution. It would be nice if the waves stops when scrolling/dragging starts.
I've got the issue on navbar with collection.

[brunoneumann]

Any news on that? Did you guys using some other approach as workaround?

[qwervo]

Interested! Any news/workarounds?

[siburny]

There is a small delay implemented in the latest version of Waves.js: https://github.com/fians/Waves/blob/master/src/js/waves.js#L108 (200ms)

[siburny]

This is a PR to upgrade Waves.js to the latest version. But can extract just the fixes for this issue if needed

[ElVasquito]

@siburny I tried adding the delay: 200 to materialize.js but there was no change in the scrolling behavior for the waves effect, so I'm definitely interested in the fix for this if you can extract it for Materialize 1.0.0!!! TIA

[QuaternionMark]

If anyone is still interested I implemented a workaround for this on my own fork here.

When it detects that the user begins dragging it starts fading out the wave immediately.