Ripple effects gets stuck if activated during another active animation/computation

[lasseloef]

EDIT: This question is related to using a cross-platform app library like Capacitor as it occurs on Android devices for me.

Is anyone seeing ripple effects getting “stuck” (both on built-ins like v-tabs and on custom elements using the v-ripple directive) after starting a long-running animation or computation—e.g., flinging a list—then tapping a component with ripple effect? The ripple becomes permanent instead of fading out.

[manimovassagh]

This is a known issue with the Vuetify ripple directive on Android (especially via Capacitor/Cordova). The ripple animation relies on transitionend events to clean up, and when the main thread is busy with another animation or heavy computation (like a fling scroll), those events can get dropped or delayed — leaving the ripple overlay permanently visible.

A few workarounds:

1. Disable ripple globally

If you don't need ripple effects on mobile, you can turn them off in your Vuetify config:

import { createVuetify } from "vuetify";

export default createVuetify({
  defaults: {
    global: {
      ripple: false,
    },
  },
});

2. Disable ripple conditionally for mobile/Capacitor

import { Capacitor } from "@capacitor/core";

export default createVuetify({
  defaults: {
    global: {
      ripple: !Capacitor.isNativePlatform(),
    },
  },
});

3. Add a cleanup timeout as a safety net

You can create a custom directive that wraps the ripple and forces cleanup after a timeout:

// In your main.js or a plugin
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    mutation.addedNodes.forEach((node) => {
      if (node.classList?.contains("v-ripple__container")) {
        setTimeout(() => {
          if (node.parentNode) {
            node.parentNode.removeChild(node);
          }
        }, 1000);
      }
    });
  });
});

observer.observe(document.body, { childList: true, subtree: true });

This is a brute-force approach, but it guarantees stuck ripples get cleaned up within 1 second.

The root cause is that Android WebView under Capacitor sometimes doesn't fire transitionend reliably when the compositor is under load. There's not much Vuetify can do about it without switching to a JavaScript-based animation timer instead of relying on CSS transitions.