How to Fix Laggy Transitions in CSS

Posted on April 26, 2015 by Dan Doicaru 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.

Rate & Share
1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5.00 out of 5)
Related Articles
Comments
  1. Gravatar Icon David:

    AWESOME!! Thanks a lot, works great!

  2. Gravatar Icon Alexander:

    Awesome, works great!

  3. Gravatar Icon Seb Romeo:

    Thanks!! This is genius!

  4. Gravatar Icon Robby:

    This totally fixed my problems! Absolutely genius! :D

  5. Gravatar Icon Marco:

    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.

  6. Gravatar Icon Some Nerd:

    Works like a charm !!!

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


+ 9 = 18

Search
Subscribe by E-mail

HTML-TUTS is created and maintained by Dan Doicaru.
This website is a rebrand to Extreme Design Studio (extremestudio.ro), built under WordPress platform.