Transform Property translate 3d on a large div is very slow in IE10 && IE 11

Question

We are changing the translate 3D on a DIV that is very large. It has thousands of child DIV's in it. It is handled properly in chrome and firefox. But IE 10 && IE 11 is very very sluggish. Any idea what can be done to make this better. Below is the line of javascript code that changes this property.

currentDIV.style[transformProperty] = 'translate3d(' + (-left) + 'px,' + (-top) + 'px,0) scale(' + zoom + ')';

the "transformProperty", "left" "top" and zoom are variables that are set before the line. Thanks.

Answer 1

translate3d forces the layer onto the GPU for rendering, and IE may not be handling that well.

Have you tried a 2D translate instead? If the slowdown does not occur then, you could target IE specifically with the 2D translate without changing much code.

Answer 2

Adding the following style property helped me to improve the translate3d performance.

-webkit-backface-visibility: hidden;
backface-visibility: hidden;