CSS Animation Flickering on Chrome with Flexbox Layout
I'm stuck trying to I'm sure I'm missing something obvious here, but I'm experiencing an scenario with a CSS animation flickering in Chrome when applied to a flex item within a flex container... The animation is supposed to smoothly change the background color of a button when hovered over, but instead, it results in a noticeable flicker effect that makes it look glitchy. This only happens in Chrome, as Firefox and Edge render it perfectly. I've tried using `will-change` to optimize rendering, but it hasn't helped. Here's a simplified version of my code: ```css .container { display: flex; justify-content: center; align-items: center; height: 100vh; } .button { padding: 10px 20px; background-color: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; } .button:hover { background-color: #2980b9; will-change: background-color; } ``` And my HTML looks like this: ```html <div class="container"> <button class="button">Hover me!</button> </div> ``` I've tried adding `transform` and `opacity` to the `will-change` property as well, but that didn't resolve the flickering. I've also checked for conflicting styles and ensured that there are no JavaScript animations causing interference. Any insights or suggestions on how to resolve this flickering scenario specifically for Chrome would be greatly appreciated! For context: I'm using Css on macOS. Has anyone else encountered this? The stack includes Css and several other technologies. Thanks for your help in advance!