Closed ericwang401 closed 3 years ago
Your codepen is empty
This Issue is being closed due to inactivity.
If you have any additional questions, please reach out to us in our Discord community.
Hello, this issue still exists
To fix this bug, you need to replace these code
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)`)
})
})
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.
Environment
Vuetify Version: 2.3.10 Vue Version: 2.0.0 Browsers: Firefox 80.0, Mozilla Firefox, Google Chrome OS: Android
Steps to reproduce
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