Chrome Compositor Transform Updates on Scroll
Blink2864 Loka 2025

Chrome Compositor Transform Updates on Scroll

These sources provide an extensive technical explanation of how the Chrome compositor manages dynamic properties, specifically focusing on transformations and scrolling, using a structure called PropertyTrees. The core mechanism for efficiency relies on granular dirty state propagation: when a property changes (like a scroll offset or animation), only the affected TransformNodes are marked as dirty (needs_local_transform_update) rather than forcing a full re-evaluation of the entire scene. The process, governed by UpdateTransformTree, ensures that changes—including complex interactions like elastic overscroll, fixed/sticky positioning, and pinch-zoom—are translated into updated screen-space layer matrices (transforms) by traversing only the dependent edges, thereby minimizing computational cost during each render frame. The sources clarify the tight coordination between the ScrollTree (which tracks offsets) and the TransformTree (which incorporates those offsets into actual layer movement matrices).


Jaksot(396)

blink::GraphicsContext

blink::GraphicsContext

immediate drawing API that records to a display list. Painters for layout objects use GraphicsContext to “draw”—but in modern Blink those calls get recorded into a display list (PaintRecord) backed by...

10 Loka 202544min

blink::TransformPaintPropertyNode / ClipPaintPropertyNode / EffectPaintPropertyNode / ScrollPaintPropertyNode

blink::TransformPaintPropertyNode / ClipPaintPropertyNode / EffectPaintPropertyNode / ScrollPaintPropertyNode

These are the nodes within those four trees. Every piece of painted content (a “paint chunk”) is associated with a tuple of (Transform, Clip, Effect, Scroll) nodes—its PropertyTreeState. This precisel...

10 Loka 202533min

blink::PaintPropertyTreeBuilder

blink::PaintPropertyTreeBuilder

builds/updates paint property trees.Consumes the layout/fragment data and produces the four paint property trees (Transform, Clip, Effect, Scroll) for the current frame. These trees encode coordinate ...

10 Loka 202547min

blink::PrePaintTreeWalk

blink::PrePaintTreeWalk

cross‑frame pre‑paint traversal. Runs in the InPrePaint lifecycle phase. Walks the entire layout tree starting at the root LocalFrameView, updating paint invalidation state and computing the context n...

10 Loka 202531min

blink::NGPhysicalFragment and friends

blink::NGPhysicalFragment and friends

Layout takes the styled DOM and produces a fragment tree of positioned boxes. In modern Blink this is LayoutNG; the core artifact is NGPhysicalFragment, which stores geometry and is used downstream fo...

10 Loka 202537min

blink::StyleEngine

blink::StyleEngine

style invalidation & resolution (recalc). 
Given DOM/style changes since the last frame, StyleEngine computes updated ComputedStyles, manages active stylesheets/media query state, and marks the right ...

10 Loka 202534min

blink::Document & blink::DocumentLifecycle

blink::Document & blink::DocumentLifecycle

states that gate phases. The document owns the DOM and keeps a DocumentLifecycle state machine that ensures we do things in phase order (style before layout, pre‑paint before paint, etc.). Lifecycle t...

10 Loka 202535min

blink::LocalFrameView

blink::LocalFrameView

orchestrates style → layout → pre‑paint/paint for a frame. This is the workhorse that actually runs lifecycle phases. On a frame tick from WebFrameWidgetImpl, it goes through style recalc, layout (Lay...

9 Loka 202544min