CSS Animation Not Applying on Hover for SVG Elements in Firefox 117
I'm having trouble with I'm having trouble getting a CSS animation to work on an SVG element when it's hovered over in Firefox... The same code works perfectly in Chrome and Safari, but in Firefox, the animation just doesn't trigger. Here's the relevant CSS: ```css .svg-icon { width: 100px; height: 100px; transition: transform 0.3s ease; } .svg-icon:hover { transform: scale(1.2); } ``` And the SVG markup looks like this: ```html <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="40" fill="blue" /> </svg> ``` I’ve tried several things, including adding `pointer-events: all;` on the SVG and ensuring the SVG has no interaction issues. The hover effect works perfectly in Chrome and Safari, but when I try to hover over the SVG in Firefox, nothing happens. There are no behavior messages in the console, and I’ve checked for CSS specificity issues, but everything seems fine. Is there something about how Firefox handles SVG animations that I’m missing? I'm working in a Linux environment. Any pointers in the right direction? This is happening in both development and production on CentOS. Thanks, I really appreciate it!