jQuery .fadeIn() optimization guide with SVG elements in Chrome
I tried several approaches but none seem to work. I'm working on a personal project and I'm reviewing some code and I'm a bit lost with I'm trying to use jQuery's `.fadeIn()` method to animate the appearance of an SVG element in my web application, but it's not working as expected in Chrome... The SVG is rendered correctly, but when I apply `.fadeIn()`, nothing happens—there's no animation, and the element remains hidden. Here's the code I’m using: ```javascript $(document).ready(function() { $('#mySvg').hide().fadeIn(1000); }); ``` The SVG element is defined in my HTML as follows: ```html <svg id="mySvg" width="100" height="100" style="display:none;"> <circle cx="50" cy="50" r="40" fill="red" /> </svg> ``` I've confirmed that the `#mySvg` element is being selected correctly, and if I replace `.fadeIn(1000)` with `.show()`, it displays instantly without any issues. I also tried `.fadeIn()` without the initial `.hide()`, but the result is the same—no animation occurs. Are there any known issues with jQuery and SVG animations specifically in Chrome, or is there something I'm missing in my implementation? I’m currently using jQuery version 3.6.0. Any advice or workaround would be greatly appreciated! Am I missing something obvious? This issue appeared after updating to Javascript stable. What's the correct way to implement this? Any ideas how to fix this?