CSS Transitions Not Applying on Hover with Flexbox in Chrome 117
I'm learning this framework and I'm having trouble getting CSS transitions to work correctly on a flexbox layout in Chrome 117. I have a flex container with several items that change their background color on hover, but the transition effect seems to be ignored, and the change happens instantaneously instead of smoothly. Here's the relevant code for my flex container and items: ```css .container { display: flex; justify-content: space-around; align-items: center; height: 100vh; } .item { width: 100px; height: 100px; background-color: blue; transition: background-color 0.4s ease; } .item:hover { background-color: red; } ``` I've checked the browser compatibility, and there shouldn't be any issues with transitions on flex items. However, when I hover over the items, the background color changes immediately without any transition effect. I've also tried adding `will-change: background-color;` to the `.item` class, but that didn't help either. Additionally, I've tested this in Firefox and Edge, where the transitions work as expected, so it seems to be a Chrome-specific question. Has anyone experienced this before, or does anyone have insights on how to fix it? Any help would be greatly appreciated! Could this be a known issue?