How to Fix Laggy Transitions in CSS

Posted on April 26, 2015 in HTML/CSS Category with Easy Difficulty

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;

Fix Laggy Transition Effect

Fix Laggy Transition with CSS3 transform property

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.

Related Articles
  1. aymen says:

    Thanks!! works great!

  2. Noob says:

    Thanks dude it’s like my transitions got the smoothest shave

  3. Patrick says:

    Thanks dude! This is awesome!

  4. Hasi says:

    Thanks! This is the only solution that worked for me.

  5. David says:

    AWESOME!! Thanks a lot, works great!

  6. Alexander says:

    Awesome, works great!

  7. Seb Romeo says:

    Thanks!! This is genius!

  8. Robby says:

    This totally fixed my problems! Absolutely genius! :D

  9. Marco says:

    Hey any idea how to solve this problem for safari?

    • Hi Marco,

      It seems Safari does not support hardware acceleration as Chrome and Firefox, so there is no solution for that. I’ll let you know if there’s something.

  10. Some Nerd says:

    Works like a charm !!!

Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.

6 − = one

Subscribe by E-mail

HTML-TUTS is built under the mighty WordPress platform.