CSS Variables Not Updating After Animation in Firefox 118
I'm prototyping a solution and I've been researching this but I'm experiencing an issue where CSS variables are not updating as expected after a CSS animation completes in Firefox 118..... I have a simple animation that changes the background color of a div using CSS variables. It works perfectly in Chrome and Safari, but in Firefox, the background color does not update until the next interaction. Here’s the relevant CSS and HTML: ```css :root { --main-bg-color: #3498db; --end-bg-color: #e74c3c; } .box { width: 200px; height: 200px; background-color: var(--main-bg-color); transition: background-color 0.5s ease; } .animate { animation: changeColor 1s forwards; } @keyframes changeColor { 100% { background-color: var(--end-bg-color); } } ``` ```html <div class="box" id="colorBox"></div> <button id="animateBtn">Animate</button> ``` ```javascript const button = document.getElementById('animateBtn'); const box = document.getElementById('colorBox'); button.addEventListener('click', () => { box.classList.add('animate'); }); ``` After the animation completes, the background color of the box is supposed to remain at `--end-bg-color`, but it just snaps back to `--main-bg-color` until I interact with the page again. I've tried force-repainting the element using `box.style.display = 'none'; box.offsetHeight; box.style.display = 'block';` but it did not help. Is there a known issue with CSS variable handling in Firefox, or is there something I'm missing in my implementation? This behavior seems inconsistent and is affecting the overall user experience. Any insights would be greatly appreciated. I'm using Javascript latest in this project. Could someone point me to the right documentation? I'm working with Javascript in a Docker container on Linux. Any pointers in the right direction? Am I missing something obvious? I recently upgraded to Javascript 3.10.