Understanding WebKit composite layers and iOS Safari performance

I’ve made a video showing how Webkit handles animating of CSS3 transforms very differently from animating of CSS position (left, top) or margin. The are several different conditions that will trigger the browser to use a “composite layer” which minimizes repaints and allows for hardware-accelerated composting. The benefits are especially dramatic in iOS Safari.

• Try the example and compare the behavior in your browser’s inspection tools
• A tweaked example for iOS that makes the performance difference very obvious: chrisdanford.com/public/transform/

This Chromium document explaining composite layers says that the following conditions all trigger a separate composite layer:

• Layer has 3D or perspective transform CSS properties
• Layer is used by video element using accelerated video decoding
• Layer is used by a canvas element with a 3D context
• Layer uses a CSS animation for its opacity or uses an animated webkit transform
• Layer has a descendant that has a compositing layer
• Layer has a sibling with a lower z-index which has a compositing layer (in other words the layer is rendered on top of a composited layer)

See Rich Bradshaw’s awesome CSS3/Transforms page for some great examples.