Why One CSS Property Slowed Down iOS and How a Single Line Fixed It

A CSS Property That Crashed iOS Performance

When a mobile H5 page applied filter: blur(100px) to several coupon divs, iPhone X showed severe jank and occasional white‑screen flashes while Android remained smooth. The blur caused the rendering process to consume excessive CPU.

After extensive debugging, adding a single line will-change: transform eliminated the lag by promoting the affected elements to a GPU‑accelerated compositing layer.

Browser Rendering Process

The rendering pipeline consists of building the DOM tree, constructing the CSSOM and merging it into a render tree, performing layout, painting, and finally compositing layers.

DOM tree construction

Render tree construction

Layout (calculating element positions)

Paint (pixel filling)

Compositing (layer merging and GPU display)

Render Layer Compositing

1. What Is Render Layer Compositing?

Each DOM node has a corresponding render object. When render objects share the same Z‑axis space, they form a render layer. Layers are stacked correctly, similar to Photoshop layers.

2. Browser Rendering Principles

Render objects map one‑to‑one with DOM nodes. When certain CSS properties or conditions are present, the browser creates a separate render layer, which may later become a graphics layer and finally a compositing layer.

Typical triggers for a new render layer include:

Root document

Positioned elements (relative, fixed, sticky, absolute)

Opacity less than 1

CSS filter, mask, mix-blend-mode CSS transform not none

backface‑visibility:hidden

CSS reflection

Column count/width not auto

Animations on opacity, transform, filter, backdrop‑filter

Overflow not visible

Elements meeting these conditions receive their own render layer, though they may share a layer with ancestors if not isolated.

3. Graphics Layer

A graphics layer generates the final bitmap that is uploaded as a texture to the GPU for compositing.

4. Compositing Layer

When a render layer satisfies special criteria (e.g., 3D transforms, video, canvas, fixed position, will-change, animated opacity/transform), the browser promotes it to a compositing layer with its own graphics layer.

3. Implicit Compositing

This is called implicit compositing: non‑composited elements that should appear above a composited one are promoted to composite layers.

Implicit compositing can occur when overlapping elements require correct stacking order, causing the browser to promote hidden layers.

4. Layer Explosion and Compression

1. Layer Explosion

Excessive implicit compositing creates many unnecessary layers, consuming GPU memory and hurting performance, especially on low‑end devices.

2. Layer Compression

The browser can merge multiple render layers into a single graphics layer to avoid explosion, but this is not always possible.

Page Rendering Optimization Based on Layer Compositing

1. Benefits and Drawbacks of Layer Compositing

GPU compositing is faster than CPU processing.

Repaints affect only the layer, not the whole page.

Transforms and opacity on composited layers avoid repaint.

However, too many layers increase memory usage and can cause flickering or crashes.

2. Using Chrome DevTools to Inspect Compositing Layers

Open More tools → Rendering → Layer borders to see yellow outlines of composited layers, or use More tools → Layers for detailed information such as size, compositing reasons, memory estimate, paint count, and slow‑scroll regions.

3. Optimization Recommendations

1. Animate with Transform

Prefer transform over left/top for moving elements so that only the animated layer repaints.

2. Reduce Implicit Compositing

Avoid unnecessary overlapping elements and adjust z-index or DOM order to prevent unwanted layer promotion.

3. Minimize Layer Size

Use small element dimensions and scale them with transform: scale(...) to keep the composited bitmap compact.

filter: blur(100px);

will-change: transform;

transform: translateZ(0);

.bottom, .top { position: absolute; will-change: transform; }

.bottom { width: 100px; height: 100px; top: 20px; left: 20px; z-index: 3; background: rosybrown; }

.top { width: 10px; height: 10px; transform: scale(10); top: 200px; left: 200px; z-index: 5; background: indianred; }