jquery - Firefox滞后于过渡效果

我保留了页面内容的主要内容：
http://boxfly.free.fr/test/transition

因此，我们可以在右上角选择要显示的框数，不幸的是，当我们单击“单击此处以移动div”时，Firefox仅滞后了2个框

CSS：

 #DivWraper {
     transition: margin-left 0.5s ease-in; /* 0.5 second transition effect to slide in the sidenav */
 }
 #DivWraper.openSidebar {
     margin-left: 250px;
 }

JS：

 $("#LinkChange").click(function() {
     if($("#DivWraper").hasClass("openSidebar")) {
         $("#DivWraper").removeClass("openSidebar");
     } else {
         $("#DivWraper").addClass("openSidebar");
     }
 });

使用Chrome，即使显示了50个框，过渡效果也始终流畅。

如何优化此效果，使其也可以在Firefox中使用？

最佳答案

您可以在可移动div上使用translation来增强硬件性能。

`transform: translateZ(0);`

关于jquery - Firefox滞后于过渡效果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44574797/