CSS View Transition Pseudo-elements Explained
Blink28624 Sep 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.


Episoder(448)

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 Nov 202539min

B6: RenderProcessHost: Lifecycle and Architecture Management

B6: RenderProcessHost: Lifecycle and Architecture Management

The provided documents outline the essential functions of the RenderProcessHost (RPH), a crucial component within Chromium's multi-process architecture that resides in the browser process to manage a ...

28 Nov 202532min

B5: Platform View Architecture

B5: Platform View Architecture

The source provides an architectural overview of Layer 5 in Chromium, which is responsible for interfacing the browser’s content output with the native operating system view layer. This layer is struc...

28 Nov 202533min

B4: Render Host Layer: RVH and RWH

B4: Render Host Layer: RVH and RWH

The technical documentation provides an extensive overview of two crucial browser-side components in Chromium's multi-process architecture: the RenderViewHost (RVH) and the RenderWidgetHost(RWH). The ...

28 Nov 202539min

B3: RenderFrameHost: Core Document Lifeline

B3: RenderFrameHost: Core Document Lifeline

The source documentation provides a detailed analysis of the RenderFrameHost (RFH) and its implementing class, RenderFrameHostImpl, which constitute the essential browser-side representation of every ...

28 Nov 202534min

B2: Frame Tree Navigation and Process Management

B2: Frame Tree Navigation and Process Management

This document details the Chromium browser's Layer 2 architecture, which is responsible for coordinating the structure and navigation of complex webpages across multiple renderer processes. The core o...

27 Nov 202544min

B1: WebContents: The Foundation of Chromium Tabs

B1: WebContents: The Foundation of Chromium Tabs

The text thoroughly analyzes the foundational structure of Chromium's architecture, which controls the browser window and tab strip elements. This system relies on a central Browser class acting as th...

27 Nov 202547min

B0: Governing Browser Windows and Tabs

B0: Governing Browser Windows and Tabs

The text thoroughly analyzes the foundational structure of Chromium's architecture, which controls the browser window and tab strip elements. This system relies on a central Browser class acting as th...

27 Nov 202535min

Populært innen Teknologi

lydartikler-fra-aftenposten
romkapsel
smart-forklart
teknisk-sett
energi-og-klima
rss-ki-praten
nasjonal-sikkerhetsmyndighet-nsm
elektropodden
rss-impressions-2
shifter
tomprat-med-gunnar-tjomlid
rss-praktisk-proptech
rss-ki-til-kaffen
hans-petter-og-co
teknologi-og-mennesker
i-loopen
kunstig-intelligens-med-morten-goodwin
rss-for-alarmen-gar
rss-ai-forklart
rss-heis