CSS containment
Slap yourself if
You think containment is a free performance flag or treat it as a safer will-change.
Why this exists
Because containment is one of the few tools that can drastically reduce rendering work — and one of the easiest ways to break layout, accessibility, or sizing assumptions if misused.
Mental model
CSS containment is a contract with the browser: you promise isolation boundaries, and the browser is allowed to stop propagating effects beyond them.
- Containment limits how far layout, style, paint, or size effects can propagate.
- The browser uses containment to cap invalidation blast radius.
- Different containment types enforce different isolation guarantees.
- Breaking the contract produces incorrect layout or visual bugs.
- Applying containment without understanding which axis is isolated.
- Using size containment where intrinsic sizing is required.
- Assuming containment affects JavaScript behavior.
- Treating contain as a performance hint instead of a constraint.
CSS containment allows the browser to limit layout, paint, and style invalidation by enforcing isolation boundaries that developers must explicitly uphold.
- Calls contain a performance hint.
- Uses contain: strict everywhere.
- Cannot explain size containment consequences.
- Thinks containment affects event propagation.
Deep dive
Requires Pro
Premium deep dives include more internals, more scars.