Massive Performance Drop With Firefox

[ghost]

Version: 0.4.2

Browser: Firefox (v. 55 64bit)

I'm getting serious performance issues only on Firefox when using a lot of vivus instances. See the following codepen:

https://codepen.io/rontdq/pen/RLoBKZ

Basically I have 38 separate svg's that use vivus to animate a bunch of roads made out of lines. For triggering each road I use jquery waypoints.

On chrome, Edge and even IE performance is smooth, but on firefox the fps tanks to single digits. If you open the codepen in chrome and firefox you should see the difference. I'm running this all through Windows 10. Is this a browser issue or am I missing something on my end with the js code that I wrote?

Thanks!

[maxwellito]

Hi there,

Thanks for providing examples, that's helpful! However when I read you had 38 svg to animate I was pretty sceptical because that's too many elements to animate. But their content is pretty simple so it's ok. I have a smooth experience on Chrome, but in Firefox too (v55, 64bit, Mac). Im afraid the problem is more about the browser engine than anything else. Ill try to find a Windows 10 to test. Did you notice any errors in the console?

[ghost]

[Sorry, clicked on close issue by mistake there hehe!]

Yeah I tried Firefox on mac and it is relatively speaking better than the performance you get on the windows version. Here is a performance log captured from firefox for windows 10:

Seems to be paint calls is the killer here?

No errors related to vivus, though looking again I do have a bunch of css declaration dropped errors. I'm not that familiar with web development in general but surely that shouldn't kill performance?

I actually managed to have 70 svg elements on the site I'm building work smoothly with vivus as they're all pretty simple :). Firefox in general is just awful for animation right now as when using GSAP for translating elements I have stuttering issues just with that browser >:(.

Another Edit: Here is my call tree:

[maxwellito]

I installed a Windows 10 VM to play around but I couldn't extract any interesting information. The animation wasn't smooth. Same on other browsers. The VM couldn't provide a fluid experience.

Can you tell me the size of the repaints you're getting? If it match the size of elements that need repaints, well the browser is poorly performing on the rendering. There's nothing I can do to help.

[ghost]

If I'm understanding you, do you mean this?

The size varies from 70ms all the way up to 100ms. Think I recall something about each paint needing to take less than 16ms to look smooth

I take it then this is just a firefox specifc issue and no optimisations can be done on on the users end to workaround it (other than just not animating it)? If it helps, this is what the repaint job is doing visually in 10fps gif quality:

[ghost]

Sorry to bump this, but don't suppose you had a chance to take a look at my previous post for this?

[maxwellito]

Sorry about the delay, I was afk and without a real Windows machine. I tried again on my VM and got this. The painting time is interesting, it's pretty short.

But still wondering about the reason of the animation smoothness. Im afraid it's a problem due to the browser and platform, otherwise the experience should be consistent across platforms.

[image: Images intégrées 1]

[maxwellito]

Sorry I couldn't upload my screenshot (Corporate networks are awesooooome!!) It was to show the performance tab : my paint was taking ~6.99 ms.

[ghost]

No worries: yeah I'll see if I can figure something out then i.e. pretend Firefox doesn't exist or just disable features specifically on that browser. I've done a simple animation test using css animations and even then Firefox causes stuttering...

Feel free to close this topic up and thanks for the help! 👍

[maxwellito]

I'll try to find a real Windows 10 machine and torture it a bit to make sure, and will also try with their new engine Quantum. Firefox and SVG got a love-hate relationship.

I'll keep you posted :)

[ghost]

Hey, delayed response on my end, but thought I'd share a solution. If you put translate3D on the svg/container it mitigates for the frame drops (I'm only dipping to 45fps at worst). Why it's only firefox that needs that I don't know but either way it works now :).

[maxwellito]

That's pretty cool! That means that firefox was probably rendering the whole page at every frame. Nice catch!

[kaspar-allenbach]

So. ehm what's the sollution to this? I have a svg where the animation is massivley delaied on FF compared to chrome: https://meteotest.meteotest-test.ch/ (the svg happens on the inital big blue surface)

[ghost]

I can give my 2 cents on this from using the library:

I checked your site and tried applying translate3d to the svg (rather than the container above it in the dom as it doesn't seem to work when on the container itself). It made a small improvement but I think the bigger problem is how many paths you have; I had nowhere near that many when building mine.

The other thing with svg I've noticed is that the smaller the size, the smaller the paint area = better fps. Try shrinking your browser and you'll see an improvement in Firefox with the animation. The library creator might know if this is definitely worth it, but you could try splitting apart your animations into multiple svgs to see if that helps - I noticed it was all just one giant one. Another option is oneByOne for scenario sync, that can help spread the drops out. Other than that I dunno if the library could pull off what you're looking for.

Hope that helps!

[kaspar-allenbach]

Thank's for the answer. I admit it might be a bit overkill :D and needs some refinement on my side. But always good to know where the limitations are.