material-components
Ripple has delay on mobile
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.
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?
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: @.***>
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.