[Bug Report] Button Ripple Glitch on Mobile Touchscreen Devices

[ericwang401]

Environment

Vuetify Version: 2.3.10 Vue Version: 2.0.0 Browsers: Firefox 80.0, Mozilla Firefox, Google Chrome OS: Android

Steps to reproduce

1. Use a mobile device with an Android device (Android 10 - One UI 2.1 - Samsung S9 SM-G960U1) running either Chrome or Firefox.
2. Visit the Codepen provided
3. Tap on any of the Vuetify buttons.

Expected Behavior

The ripple should function as expected (on desktops and on mobile devices).

Actual Behavior

Sometimes the ripple was not at the position of the finger and sometimes the ripple would not appear at all.

Reproduction Link

https://codepen.io/synent/pen/MWyxBYX

Other comments

For some reason, the ripple works as intended on Safari on the latest, stable version of iOS.

Here is a video of the actual functionality: https://drive.google.com/file/d/1TSc9Trc4L6zn7_FAJgFSznPPxRl9OKoz/view?usp=sharing

[KaelWD]

Your codepen is empty

[ericwang401]

Whoops!

I edited the comment.

https://codepen.io/synent/pen/MWyxBYX

[johnleider]

This Issue is being closed due to inactivity.

If you have any additional questions, please reach out to us in our Discord community.

[Jesse205]

Hello, this issue still exists

[Jesse205]

To fix this bug, you need to replace these code

https://github.com/vuetifyjs/vuetify/blob/32362f75b7ecf8f8b0be575df9b98adce289f365/packages/vuetify/src/directives/ripple/index.ts#L122-L126

with

    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        animation.classList.remove('v-ripple__animation--enter')
        animation.classList.add('v-ripple__animation--in')
        transform(animation, `translate(${centerX}, ${centerY}) scale3d(1,1,1)`)
      })
    })

[Jesse205]

For the current project developed with Vuetify, the following code snippet in TypeScript:

// src/main.ts
function fixVRippleOnMobile() {
  const originSetTimeout = setTimeout
  window.setTimeout = function (handler: TimerHandler, timeout?: number): number {
    if (timeout === 0 && typeof handler === 'function') {
      return originSetTimeout(() => {
        requestAnimationFrame(() => {
          requestAnimationFrame(() => {
            handler()
          })
        })
      }, 0)
    } else {
      return originSetTimeout(handler, timeout)
    }
  }
}
fixVRippleOnMobile();

can be incorporated to provisionally address this bug.