Windows 10 bereikte EO (einde ondersteuning) op 14 oktober 2025. Als je Windows 10 gebruikt, lees dan dit artikel.

Windows 10 reached EOS (end of support) on October 14, 2025. If you are on Windows 10, see this article.

Zoeken in Support

Vermijd ondersteuningsscams. We zullen u nooit vragen een telefoonnummer te bellen, er een sms naar te sturen of persoonlijke gegevens te delen. Meld verdachte activiteit met de optie ‘Misbruik melden’.

Meer info

Animation Performance Issue in SVG Rendering

  • 4 antwoorden
  • 0 hebben dit probleem
  • 212 weergaven
  • Laatste antwoord van spam dummy

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.

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.

Alle antwoorden (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.

https://codepen.io/kzwr/pen/qEZzYaN

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.

Een vraag stellen

U moet zich aanmelden bij uw account om op berichten te antwoorden. Stel een nieuwe vraag als u nog geen account hebt.