CSS Animation Performance implementing Large DOM Elements - Flickering in Firefox
I'm having trouble with Quick question that's been bugging me - I'm experiencing performance optimization with a CSS animation applied to a large DOM element in Firefox. The animation is supposed to smoothly transition the element from opacity 0 to 1 over 1 second, but instead, it flickers and seems jumpy during the transition, especially when the element is within a flex container. Here's the CSS I’m using: ```css @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fade-in { animation: fadeIn 1s ease-in-out; will-change: opacity; } ``` And here’s how I’m applying it in my HTML: ```html <div class="container"> <div class="large-element fade-in">I fade in smoothly!</div> </div> ``` The `container` class has `display: flex; align-items: center; justify-content: center;` applied to it, which is essential for my layout. However, when I test this in Firefox (version 106.0), I notice that as the animation starts, the large element flickers briefly before fully transitioning. I've tried adding `will-change: opacity;` to improve the animation performance, and I also experimented with changing the `animation-timing-function` to `linear`, but neither helped with the flickering scenario. Interestingly, this question doesn’t occur in Chrome or Safari, which leads me to suspect that it might be related to how Firefox handles animations within flex containers. Is there a known fix or workaround for this flickering scenario in Firefox, especially with larger elements? Any suggestions or insights would be greatly appreciated! I'm working on a API that needs to handle this. I'm working on a API that needs to handle this. I'd really appreciate any guidance on this. This is part of a larger desktop app I'm building. I'd really appreciate any guidance on this.