I am trying to pinpoint the cause and, if possible find a fix or workaround for a performance issue I am having when updating the transform of about 200 span elements in Firefox.
In Chrome, I am able to achieve smooth 60fps, but the same example in Firefox has huge performance issues which seem to be introduced when updating the rotate transform of the elements.
I have reproduced the issue here: https://codepen.io/Epz-the-bold/pen/BaGvGLx
I have tested that by removing the rotate transform part, Firefox keeps up with Chrome's FPS at ~55-60fps.
Does anybody have any pointers on what is causing this issue and/or possible solutions?
To clarify why I am not using CSS transitions (which would work fine in FF) and instead updating the transforms on each frame: in my original code. I am running a physics simulation to update the position and rotation of each span, so those should be managed by the physics engine to keep consistency between the DOM and the simulation.
Adding transform-style: preserve-3d; to the spans completely fixed the issue, I am now seeing consistent fps in both Firefox and Chrome. My guess is this forces FF to use hardware acceleration in a case where translate3d and rotateZ were not working.
It seems that adding a short transition to the transform property helps mitigate this issue in Firefox, from my tests the transition duration should be higher than the average frame time or it'll cause more stuttering:
transition: transform 100ms linear;