CSS Backdrop-Filter
Blink28616 Loka 2025

CSS Backdrop-Filter

The sources provide an extensive technical explanation of the CSS backdrop-filter property within Google Chrome's Blink rendering engine. This deep dive details how the feature, which allows filters like blur or brightness to be applied to content behind an element, is implemented via Blink's compositing and GPU pipeline, involving the creation of EffectNodes and RenderPasses. Much of the discussion focuses on interoperability issues and performance optimizations, particularly how Blink addressed the notorious edge flicker artifact by adopting the mirror edge sampling mode and ensuring that the effect correctly respects stacking contexts and clipping (like border-radius), while also cautioning developers about the significant performance cost associated with the feature.

Jaksot(403)

CSS Sticky Positioning and Paint Property Trees

CSS Sticky Positioning and Paint Property Trees

This documentation details how the Blink rendering engine manages CSS sticky positioning through its PrePaint and paint property tree workflows. During the PrePaint phase, the engine identifies sticky...

26 Joulu 202551min

[General] Inside Blink: The Paint Property Tree Builder Pipeline

[General] Inside Blink: The Paint Property Tree Builder Pipeline

The PaintPropertyTreeBuilder is a critical component within Google Chrome’s Blink engine that converts layout data into structural property trees used for rendering. Operating during the PrePaint phas...

24 Joulu 202550min

Inside Blink: The Paint Property Tree Builder Pipeline

Inside Blink: The Paint Property Tree Builder Pipeline

The PaintPropertyTreeBuilder is a critical component within Google Chrome’s Blink engine that converts layout data into structural property trees used for rendering. Operating during the PrePaint phas...

24 Joulu 20251h 4min

Promisify Scroll: Promise-Based Web Scrolling API

Promisify Scroll: Promise-Based Web Scrolling API

The provided text describes a web platform initiative to modernize how browsers handle scrolling by having programmatic scroll methods return JavaScript Promises. Currently, functions like scrollTo() ...

24 Joulu 202528min

CSS Containing Blocks and Blink Engine Implementation

CSS Containing Blocks and Blink Engine Implementation

This text examines how CSS containing blocks function and how the Blink rendering engine implements these rules within Chromium. It explains that a containing block is the essential rectangular refere...

23 Joulu 202526min

Axis-Split Sticky Constraints in Chromium Layout and Compositing

Axis-Split Sticky Constraints in Chromium Layout and Compositing

Chromium is refining its rendering engine to support axis-split sticky constraints, allowing elements to stick to different scroll containers for horizontal and vertical movements. Previously, a singl...

23 Joulu 202533min

Mastering CSS Sticky Positioning and Scroll Containers

Mastering CSS Sticky Positioning and Scroll Containers

This documentation provides a comprehensive analysis of CSS sticky positioning, a hybrid layout scheme that anchors elements within their nearest scroll container while maintaining their space in the ...

20 Joulu 202534min

Blink Paint Property Trees: Construction and Lifecycle Phases

Blink Paint Property Trees: Construction and Lifecycle Phases

The provided text explains the construction and lifecycle of paint property trees within the Blink rendering engine. These structures, which include Transform, Clip, Effect, and Scroll trees, replace ...

20 Joulu 20251h 1min