CSS View Transition Pseudo-elements Explained
Blink28624 Syys 2025

CSS View Transition Pseudo-elements Explained

These sources provide a detailed, technical explanation of the View Transition API implementation within the Chromium web browser, focusing on how CSS pseudo-elements enable smooth animations. The first source explains that view transition pseudos (like ::view-transition-old() and ::view-transition-new()) are temporary, browser-synthesized overlays used to capture and animate visual snapshots of elements during state changes. The second, more extensive source describes the low-level C++ classes in the Blink rendering engine and the cc compositor that orchestrate this process, including the DocumentTransition class, which manages the lifecycle, snapshot capture, and pseudo-element creation, and the SurfaceAnimationManager in the Viz component, which handles the final, performant GPU-accelerated animation of the saved frames using specialized layers and directives. Together, the texts map the high-level CSS API to the complex, multi-process architecture of Chromium, explaining how old and new content are matched, isolated on the top layer, and composited for animation.


Jaksot(399)

WebView Feature Flags: Java to Native Compositor

WebView Feature Flags: Java to Native Compositor

The source documents examine the complex, multi-layered feature-flag architecture within Android's WebView, which is essential for controlling experimental features, field trials (Finch), and underlyi...

5 Joulu 202537min

Geometry, Immutability, and Caching in LayoutNG Fragments

Geometry, Immutability, and Caching in LayoutNG Fragments

The provided text describes Blink’s LayoutNG Fragment Tree, an immutable structure that captures the final geometry and layout results, replacing the mutable legacy layout tree. This structure is comp...

4 Joulu 20251h 5min

The CSS anchor-scope Property: Design and Blink Layout

The CSS anchor-scope Property: Design and Blink Layout

The provided text exhaustively describes the CSS anchor-scope property, a critical addition to CSS Anchor Positioning designed to prevent naming conflicts when reusing components. This property define...

4 Joulu 20251h 5min

The Bicameral Mind and the Birth of Consciousness

The Bicameral Mind and the Birth of Consciousness

The provided text offers a comprehensive exploration of Julian Jaynes's Bicameral Mind Theory, which posits that humans, as recently as 3,000 years ago, lacked modern introspective consciousness. Jayn...

3 Joulu 202559min

Trees in Viz: Chrome's Centralized Compositing Engine

Trees in Viz: Chrome's Centralized Compositing Engine

The source details a significant re-architecture of the Chromium rendering pipeline, known as JellyMander, centered on the feature Trees in Viz (TiV). This change shifts the core task of frame composi...

30 Marras 202530min

PaintLayerPainter: Blink's Bridge from Layout to Rendering

PaintLayerPainter: Blink's Bridge from Layout to Rendering

The source material provides an exhaustive technical analysis of Blink’s PaintLayerPainter, the central coordinator responsible for executing the CSS painting algorithm to generate visual output. This...

30 Marras 202541min

Blink Property Trees: Scene Graph for Compositing

Blink Property Trees: Scene Graph for Compositing

The sources provide a comprehensive technical analysis of the Paint Property Tree Builder (PPTB) in Blink, which is the mechanism responsible for creating the crucial intermediate data structures know...

30 Marras 202540min

The Architecture of Chromium's Safe Callback Cancellation

The Architecture of Chromium's Safe Callback Cancellation

The source material provides a comprehensive examination of Chromium's CancelableCallback utility, which was introduced to allow for the safe and explicit cancellation of tasks that have been schedule...

29 Marras 202539min