Animation Performance Issue in SVG Rendering
In Firefox, the animation exhibits performance issues like stuttering, particularly in elements that rely on animateTransform and animate for movement or opacity transitions. This issue is not present in Chrome, where the animations run smoothly without any noticeable lag.
Expected Behavior: The animation should render smoothly on both Chrome and Firefox without any stuttering or lag, providing a seamless experience for users.
Steps to Reproduce:
Open the provided SVG code in Firefox.
Observe the animation, particularly the elements with animate and animateTransform attributes.
Notice the stuttering or lag compared to the smooth rendering in Chrome.
所有回覆 (4)
Biny said
In Firefox, the animation exhibits performance issues like stuttering, particularly in elements that rely on animateTransform and animate for movement or opacity transitions. This issue is not present in Chrome, where the animations run smoothly without any noticeable lag. Expected Behavior: The animation should render smoothly on both Chrome and Firefox without any stuttering or lag, providing a seamless experience for users. Steps to Reproduce: Open the provided SVG code in Firefox. Observe the animation, particularly the elements with animate and animateTransform attributes. Notice the stuttering or lag compared to the smooth rendering in Chrome.
This looks like a Firefox limitation with SVG SMIL animations rather than a problem with your code. Firefox tends to struggle when many elements animate at the same time, especially with transform and opacity. Reducing the number of animated elements usually helps. Another option is to move the animation to CSS instead of using animate or animateTransform. Some people also get better results by slightly slowing the animation down so Firefox has more time to render each frame. If you need it to be smooth everywhere, switching away from SMIL animations is usually the safest approach.
Understood, thanks for the explanation. Since the same code runs smoothly in Chrome, I wanted to report this to the Firefox community in hopes that Firefox's performance will continue to improve.
+1 I've also noticed this while using Zen, based on Mozilla. elements with continues motion like tickers\marquees\carousels have a very slight stutter on their easing and constant motion. "Floating" looping animation elements stutter, small button animations stutter.. happens especially at the end of the animations where the easing takes part.
I've tried tinkering with countless settings, WebRenderer settings, VSync, custom FPS, debugging and monitoring tools, NVIDIA control panel app settings, GPU Acceleration settings.. nothing budges.
Everything works perfectly on several chromium based browsers though.