JavaScript – “click” button lags behind the animation in mobile browsers / views

  • Home / Blog / JavaScript – “click”…

JavaScript – “click” button lags behind the animation in mobile browsers / views

I am creating a UI in NoxtGus and activating a button with TailwindCSS. Everything is running smoothly except the animation of this button is behind the mobile feedback. This is a problem because the button is designed for fast clicking, which is why mobile animation doesn’t work most of the time. I am using <meta name="viewport" content="width=device-width, initial-scale=1"> and tried various Touch Action – Features in CSS.

This is the code for the button component

<template>
  <button
    class="p-1 bg-gray-800 ring-2 ring-gray-800 ring-offset-4 rounded-full shadow-md text-gray-200 transition-all transform linear duration-75 active:text-gray-100 active:shadow active:scale-95 hover:scale-105 hover:shadow-lg"
    :class="[fullColor]"
  >
    <slot></slot>
  </button>
</template>

Write a Comment

Your email address will not be published. Required fields are marked *

x