In this tutorial you will learn how to fix laggy transitions visible in Firefox and Chrome browsers when using CSS3 transition with left, right, top and bottom properties together with absolute or fixed position containers.
This problem occurs whenever you are using a css transition with linear, easing or any other effect and it has a annoying sloppy movement. For example:
-webkit-transition: top 500ms ease; -moz-transition: top 500ms ease; -o-transition: top 500ms ease; transition: top 500ms ease;
To fix the lag between transition effects you can use the CSS3 transform property, more exactly transform: translateZ(). This will enable hardware acceleration and you will have a boost on animations that uses transitions. Give it a try with the code below. Just add the code under transitions in your css.
/* Enable hardware acceleration to fix laggy transitions */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0);
Let me know in the comments section if this solution works for you. You can also use translateX or translateY as alternate solution, the only problem these 2 are used to create sliding containers. Usually this problem is more visible in Firefox.
If this tutorial was useful, you can help me maintain this website with more tutorials by buying me a coffe (or at least the sugar).