CSS Transition Timing Function Not Applying Correctly to Hover State in Firefox 118
I'm converting an old project and I keep running into I'm experiencing a strange scenario with CSS transitions where the timing function I specify for a hover state does not seem to take effect in Firefox 118. My goal is to create a smooth scaling effect on a button when the user hovers over it. I've set up the following CSS: ```css .button { background-color: #4CAF50; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; transition: transform 0.3s ease-in-out; } .button:hover { transform: scale(1.1); } ``` When I test this in Chrome and Safari, the hover effect works beautifully. However, in Firefox, the scaling appears to happen immediately without any transition, as if the `ease-in-out` function is ignored. I've tried clearing the cache, checking for any other conflicting styles, and even using different timing functions like `linear` and `cubic-bezier`, but nothing seems to resolve the scenario. Additionally, I have validated that my CSS is correct using tools like the W3C CSS Validator, and I am not seeing any errors in the console that could indicate a question with the CSS itself. Is there something specific to Firefox that I might be overlooking, or do you think it could be an scenario with the way transitions are handled in this browser version? Any insights would be greatly appreciated! I'm working with Css in a Docker container on Linux.