CSS Transitions optimization guide With Filter Property in Firefox
I'm optimizing some code but I've been struggling with this for a few days now and could really use some help. I'm trying to create a smooth transition effect for a filter on a div element when a class is added, but it seems like the transitions are not working in Firefox. The idea is to apply a blur effect on hover using CSS transitions. The following code works well in Chrome, but in Firefox, the transition appears to be instant rather than smooth: ```css .box { width: 200px; height: 200px; background-color: #3498db; transition: filter 0.5s ease; } .box.blur { filter: blur(10px); } ``` And here’s how I’m applying the class with JavaScript: ```javascript document.querySelector('.box').addEventListener('mouseenter', function() { this.classList.add('blur'); }); document.querySelector('.box').addEventListener('mouseleave', function() { this.classList.remove('blur'); }); ``` In Firefox, when I hover over the box, it immediately jumps to the blurred state instead of transitioning smoothly. I checked my Firefox version (110.0) and ensured that all CSS settings are default. I also tried adding `will-change: filter;` to the `.box` class, but that didn’t help either. Is there a known scenario or workaround for achieving a smooth transition for the filter property in Firefox? This is happening in both development and production on Ubuntu 22.04. My development environment is Windows 10.