Style, Layout, Paint and Composite

I am blockquote-ing everything that is referenced, since I’ve borrowed some information from MDN and Google articles that are already worded perfectly.

Basic rules are:

  • Stick to ONLY transform and opacity changes for your animations.
  • Promote moving elements (or position:fixed elements) with will-change or translateZ.
  • Avoid overusing promotion rules; layers require memory and management.

There are two key factors in this area that affect page performance: the number of compositor layers that need to be managed, and the properties that you use for animations.

The best-performing version of the pixel pipeline avoids both layout and paint, and only requires compositing changes. In order to achieve this you will need to stick to changing properties that can be handled by the compositor alone. Today there are only two properties for which that is true: transforms and opacity:

Google Developers

st-ly-pa-cm and transform

The caveat for the use of transforms and opacity is that the element on which you change these properties should be on its own compositor layer. In order to make a layer you must promote the element. Google Developers

To promote an element onto it’s own layer, including elements that ‘stand still’ with position fixed – use the following:

The will-change CSS property provides a way to hint browsers about the kind of changes to be expected on an element, so that the browser can setup appropriate optimizations ahead of time before the element is actually changed. Mozilla MDN

Given that we are allowed to animate opacity with no performance hit, I’m not sure why it’s included, but here are some values you can apply will-change: to:

For older browsers, or those that don’t support will-change:

The translateZ(); CSS function moves the element along the z-axis of the 3D space as demonstrated in the pen below.

See the Pen KVWmGG by Peter (@peterdillon) on CodePen.

Be cautious: Do not promote too many elements because it uses browser memory space and for devices with smaller allocation, it can have a negative impact on performance.

JS and Layout Engine Concurrent Race Condition

Just a note about JavaScript and browser layout engines:

This loops because the layout engine has not yet calculated the height (or any other attributes) of the the image.

Peter Dillon

Development teams seek me out for visual design, reskinning, information hierarchy, usability, iconography, improving task flow, improving the front end build process and more. I specialize in creating engaging solutions to solve real world problems while designing beautiful applications that make the lives of users easier.