Question

我保留了我的网页包含的主要内容： 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中流畅？

Answer 1

您可以在可移动div上使用translate来为其提供一些硬件提升。

`transform: translateZ(0);`

Answer 2

来自Mozilla基金会的人开了一张错误券： https://bugzilla.mozilla.org/show_bug.cgi?id=1373394

由于多进程（e10s）的激活。要检查差异，请通过以下方式停用e10：

about：config

browser.tabs.remote.autostart = false

browser.tabs.remote.autostart.2 =假

Firefox落后于过渡效应

2 个答案: