Clever Geek Handbook

Firefox lags behind transition effect

I saved the bulk of my page: http://boxfly.free.fr/test/transition

So we can select in the upper right corner the number of boxes to be displayed, and unfortunately, out of only 2 boxes, Firefox lags behind when we click "Click here to move the div"

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");
     }
 });

With Chrome, the transition effect is all the time, even when 50 boxes are displayed.

How can I optimize this effect to be close to Firefox too?

+3


source to share


2 answers


You can use translate on movable div to give it some hardware support.



`transform: translateZ(0);`
+1


source


Someone from the Mozilla Foundation opened a ticket with an error: https://bugzilla.mozilla.org/show_bug.cgi?id=1373394

This is due to the activation of the multiprocess (e10s). To check the difference, deactivate e10s:

about: config



browser.tabs.remote.autostart = false

browser.tabs.remote.autostart.2 = false

0


source






More articles:


All Articles