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(397)

Architecture of Scrolling in Chrome (Blink vs. CC Overview)

Architecture of Scrolling in Chrome (Blink vs. CC Overview)

The source provides an extensive overview of the Chrome browser's scrolling architecture, detailing the division of labor between the Blink rendering engine (main thread) and the Chromium Compositor (...

10 Marras 202526min

[ext] Web View Transitions: Technical Deep Dive

[ext] Web View Transitions: Technical Deep Dive

The source provides an exhaustive technical and historical overview of the Web View Transition API, a modern set of web platform features designed to enable fluid, animated transitions between user in...

9 Marras 20251h 16min

Chromium Input Handling Deep Dive: Compositor and Proxy

Chromium Input Handling Deep Dive: Compositor and Proxy

The sources provide an extensive examination of Chromium’s input handling pipeline, focusing on the roles of the InputHandler and InputHandlerProxy within the renderer's dedicated compositor thread. T...

8 Marras 202540min

Web View Transitions: Technical Deep Dive

Web View Transitions: Technical Deep Dive

The second source introduces the View Transition API, a modern web platform feature that allows developers to create smooth, animated transitions between different UI states or entire pages by automat...

8 Marras 202547min

Chrome Compositor: Raster-Inducing Scrolling Explained

Chrome Compositor: Raster-Inducing Scrolling Explained

The source provides an extensive technical explanation of raster-inducing scrolling within the Chrome browser's rendering pipeline, focusing on the sophisticated architecture of the Chrome Compositor ...

8 Marras 202542min

Chromium ContentBrowserTest Architecture and Practice

Chromium ContentBrowserTest Architecture and Practice

The source provides an extensive overview of Chromium's ContentBrowserTest system, which functions as an integration test harness designed for the content layer of the browser. These tests operate by ...

6 Marras 202544min

Blink Compositor Promotion of CSS Animations

Blink Compositor Promotion of CSS Animations

The technical sources provide an extensive analysis of how the Blink rendering engine (used in Chromium/Chrome) determines whether a CSS animation can be executed on the compositor thread instead of t...

6 Marras 202536min

Blink Compositor Gesture Lifecycle in InputHandlerProxy

Blink Compositor Gesture Lifecycle in InputHandlerProxy

The source text explains the detailed lifecycle of a gesture scroll sequence within the Chromium rendering engine, focusing on the role of the InputHandlerProxy component. This component acts as a cru...

6 Marras 202525min