← Back to release summary

Update CSS backdrop-filter to use mirror edgeMode

Category
CSS
Type
No developer-visible change
Status
Enabled by default (Chrome 129)
Intent stage
None

Summary

The backdrop-filter CSS property applies one or more filters to the "backdrop" of an element. The "backdrop" basically means all of the painted content that lies behind the element. A common filter is a blur allowing designers to construct "frosted glass" dialog boxes, video overlays, translucent navigation headers, and more. This was initially implemented the same way as a regular blur, but sampling beyond the edges of the element allowed colors from the edges to bleed in. The spec was changed to sample pixels outside the backdrop edges by duplicating the pixels at the edge. This however, results in extreme flickering of content as it enters the backdrop edge. The latest spec change mirrors the backdrop when sampling beyond the edge which allows for a smooth gradual introduction of new colors at the edges without overweighting on single lines of color.

Motivation

The duplicate edgeMode leads to extreme flickering when moving elements with blur backdrop filters over content. As an extreme example https://jsbin.com/fumeloh/edit?html,css,output shows what it looks like when moving an element over a striped pattern. This makes the feature much less useful for one of its primary use cases - simulating a frosted glass effect - as the result can be visually much worse than the tricks that were used before backdrop-filter. The mirror edgeMode solves the issue of not bringing content in from outside the backdrop edges while still having a smooth gradual transition as content is introduced to the edges.

Standards & signals

View on chromestatus.com