CSS Animation Not Triggering on Hover When Nested Inside Flexbox in Chrome 117
I'm trying to implement I'm trying to implement I'm migrating some code and I've been struggling with this for a few days now and could really use some help. I'm experiencing an scenario where a CSS animation is not triggering on hover for elements that are nested inside a flexbox container in Chrome 117. The animation works perfectly in Firefox and Edge, but in Chrome, it seems to be completely ignored. Here's the relevant part of my CSS: ```css .container { display: flex; justify-content: center; align-items: center; height: 100vh; } .box { width: 100px; height: 100px; background-color: blue; transition: transform 0.5s ease; } .box:hover { transform: scale(1.2); } ``` And this is my HTML structure: ```html <div class="container"> <div class="box"></div> </div> ``` I've tried adding `will-change: transform;` to the `.box` class, but that didn't resolve the scenario. I've also cleared the cache and tested in incognito mode to rule out any caching problems, yet the animation remains unresponsive on hover in Chrome. This behavior is quite perplexing, as I've double-checked that other hover styles work within the same flexbox context. Is there something specific to Chrome's handling of flexbox and transitions that I might be missing, or is this a known bug? Any insights or workarounds would be greatly appreciated! Am I approaching this the right way? How would you solve this? This is part of a larger mobile app I'm building. What's the correct way to implement this?