Ripple has delay on mobile

[TeamBusylj]

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]

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]

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 <#5474 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AVDSXLQZFJGEL7UENI5GCF3YUT2VRAVCNFSM6AAAAABDP2EGZCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNJUHEYTOMZQGI> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[asyncLiz]

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.