search

material-components / material-web

Material Design Web Components
https://material-web.dev
Apache License 2.0
9.17k stars 872 forks source link

Ripple has delay on mobile #5474

Open TeamBusylj opened 6 months ago

TeamBusylj commented 6 months ago

What is affected?

Component

Description

The mobile Ripple effect experiences a slight delay of a few milliseconds between pressing a button and the effect being displayed.

Reproduction

Try it anywhere.

Try it on this button: Material outlined button

Workaround

I have not found a workaround.

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

All versions

Browser/OS/Node environment

It does occur on tested Android 14/Chrome device, but not on computer.

asyncLiz commented 6 months ago

I believe this is an intentional delay from the mobile browser to determine if a touch gesture is a tap or swipe, as opposed to a pointer device like a stylus or mouse.

Does adding touch-action: none to components with ripples remove the delay for you?

TeamBusylj commented 6 months ago

Hi, thanks for you response. I tried that but it still has delay.

On Tue, Feb 20, 2024 at 8:30 PM Elizabeth Mitchell @.***> wrote:

I believe this is an intentional delay from the mobile browser to determine if a touch gesture is a tap or swipe, as opposed to a pointer device like a stylus or mouse.

Does adding touch-action: none https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action to components with ripples remove the delay for you?

— Reply to this email directly, view it on GitHub https://github.com/material-components/material-web/issues/5474#issuecomment-1954917302, or unsubscribe https://github.com/notifications/unsubscribe-auth/AVDSXLQZFJGEL7UENI5GCF3YUT2VRAVCNFSM6AAAAABDP2EGZCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNJUHEYTOMZQGI . You are receiving this because you authored the thread.Message ID: @.***>

asyncLiz commented 6 months ago

I tried on Android with the lit.dev playground, and there doesn't seem to be a perceptible delay to me. Can you provide a screen recording and more details on the type of mobile device hardware being used Chrome's version?

There can be a 300ms delay between touches and clicks registering. There are quite a few historical strategies for removing this delay, though modern browsers may not really experience it with the right meta tags. You can try out some of these strategies as well.