TailwindCSS group-hover Animation Not Working in Chrome (v133) but Works in MS-Edge

[Chayandev]

I'm experiencing an issue where group-hover animations are not working properly in Chrome (Version 133.0.6943.60, 64-bit) and Brave, but they work fine in Microsoft Edge. The animations involve opacity and transform changes on hover, but in Chrome/Brave, the transitions either do not trigger.

System Information
Device: Dell XPS 13, touch screen
Chrome Version: 133.0.6943.60 (64-bit)
TailwindCSS Version: 4.0.3
Tailwind Vite Plugin Version: @tailwindcss/vite 4.0.3
Code Snippet

<div className="p-4 rounded-full bg-light-trasparent-olive-green 
  group-hover:bg-white transition-all duration-300 ease-in-out 
  relative overflow-hidden shadow-md"
>
  <div className="w-5 h-5 relative">
    {/* White Arrow (Initially Visible) */}
    <FaArrowLeftLong
      className="rotate-135 w-5 h-5 text-white absolute 
      duration-300 transition-all ease-in-out
      group-hover:opacity-0 group-hover:translate-x-[100%] 
      group-hover:-translate-y-[100%]"
    />
    {/* Olive Arrow (Appears from Bottom-Left) */}
    <FaArrowLeftLong
      className="rotate-135 w-5 h-5 text-dark-oliv-green absolute 
      opacity-0 translate-x-[-100%] translate-y-[100%] 
      duration-300 transition-all ease-in-out
      group-hover:opacity-100 group-hover:translate-x-0 
      group-hover:translate-y-0"
    />
  </div>
</div>

Chrome (after hover - no change in bg also animation) ❌

MS-Edge (after hover expected hover effect with animation) ✅

[wongjn]

Perhaps it could be #16150 (comment)?

[Chayandev]

@wongjn Thank You , it's the problem of that specific device only .