How do you move SVG around a web page without starting slow redraws?

Question

I use d3.js to draw a (multi) line graph (with lots of data points, more precisely 1600) on the svg element. This graph is in a container that has a transition to it.

In a specific event, the container moves 400 pixels at the top with a CSS3 transition that works fine in Chrome. When I try in Safari and Firefox, I noticed that it was very slow. After some checks, I can confidently say that the svg element is redrawn during the transition (a lot) in Safari / Firefox (and, possibly, in other browsers).

Anyway, to prevent the browser from redrawing constantly until the transition is complete? Or maybe other solutions that would make it fluent?

FYI: not drawing a diagram in the SVG element does not allow the problem to go away, so I am sure that the slowdown comes from the SVG element.

Simplified html code:

<div id="container" style="transition:margin 0.75s; -webkit-transition:margin 0.75s; ">
    <svg id="simple_line" style='height:210px; width:100%;'/>
</div>

Answer 1

Generally speaking, using marginor any other CSS position value to move objects around the screen is suboptimal. Try using the transform / translate style to create a movement that allows the browser to use graphical optimization techniques.

, , , . - - , Chrome , .