Non-composited animations

What are non-composited animations ?

When a browser interprets the code of a page and converts the HTML, CSS and JavaScript into pixels, it performs what is called the pixel pipeline. It is a process that consists of 5 sequential steps :

1. JavaScript / CSS
2. Style 
3. Layout
4. Paint
5. Composite

At each step, the browser uses the result of the previous step to create new data.  A non-composited animation is a rendering that forces the browser to go back to a previous step (JavaScript / CSS, Style, Paint and Layout) which increases the necessity of calculations and therefore the rendering time.

Why should they be avoided ?

Non-composited animations may appear irregular when rendered by the browser on low-powered machines or when heavy tasks are executed at the same time. This lack of fluidity affects the visual perception of the page for users.

How to correct them

There are several reasons why an animation is not composited and to correct them it is necessary to intervene on the CSS rules in use :

• incompatible CSS property
• the property linked to "transform" depends on the size of the zone
• the property related to "filter" can move pixels
• the composite mode of the effect is not "replace"
• the target contains another incompatible animation
• the effect has timer settings that are not compatible with each other

For more information about the pixel pipeline and optimizing performance for rendering, check Google's documentation on rendering performance.