CSS Transition optimization guide as Expected with Pseudo-elements in Firefox 93
Hey everyone, I'm running into an issue that's driving me crazy. I'm working with an scenario where CSS transitions on pseudo-elements are not behaving as expected in Firefox 93. I have a hover effect on a button that changes the background color of the button and also applies a scale transform to a pseudo-element that acts as an underline. While the background color transition works fine, the scaling transition of the pseudo-element seems to jump instead of transitioning smoothly. Here's the relevant CSS I've implemented: ```css .button { position: relative; background-color: #3498db; color: white; padding: 10px 20px; border: none; cursor: pointer; transition: background-color 0.3s ease; } .button::after { content: ''; position: absolute; left: 0; bottom: -5px; height: 2px; width: 100%; background-color: white; transform: scaleX(0); transition: transform 0.3s ease; } .button:hover { background-color: #2980b9; } .button:hover::after { transform: scaleX(1); } ``` On Chrome, this works perfectly, with a smooth effect when hovering over the button. However, in Firefox, the transition for the pseudo-element's scaleX appears to jump directly to the final state without animating. I have tried adding `will-change: transform;` to the pseudo-element, but that did not help either. Any insights on why this might be happening in Firefox and how I can resolve it? Thank you! For context: I'm using Css on Windows. Any ideas what could be causing this?