Why isn't my CSS3 animation smooth in Google Chrome (but very smooth on other browsers)?

Solution 1:

Chrome supports hardware acceleration when rendering, improving performance for css3 animations. You can trigger hardware acceleration by applying translateZ(0), rotateZ(360deg) or similar which tricks Chrome into it.

Once you're using hardware acceleration by applying the trick above (or if you were already using it, but the cited code sample was incomplete and/or a third party library was taking care of it for you), you can further improve performance by applying, with prefixes as needed:

backface-visibility: hidden;
perspective: 1000;

This also helps address some issues when the GPU is integrated and/or being throttled (think power-saving mode), and its performance degrades. This would explain issues with parallax performance on a macbook! ¯\_(ツ)_/¯

Solution 2:

To make animations better you can use will-change property of CSS. This property hints the browser that the element is going to change.

https://developer.mozilla.org/en/docs/Web/CSS/will-change

You can read here more about will-change.

Solution 3:

SOLUTION:

Use absolute positioning with @media for different screen sizes.

EXPLANATION:

It works for all other browsers and not Chrome so whatever you do will be specifically for Chrome.

This gives you 3 options:

• (1) get Google to fix Chrome or

• (2) use a solution that will work with Chrome or

• (3) accept it will not be smooth with Chrome.

TL;DR:

You know absolute positioning will work.