The backdrop-filter containing-block bug

The bug

A donation modal on David Amaringo’s site was supposed to overlay the entire viewport when opened. Instead, it rendered as a tiny strip pinned to the site’s 64px-tall header — as if the modal believed the header, not the browser window, was the full extent of the page.

The real cause

position: fixed is normally positioned relative to the viewport — that’s the whole point of using it for a full-screen modal. But the CSS spec has a lesser-known exception: any ancestor with a non-default backdrop-filter, filter, transform, perspective, or will-change value becomes the containing block for its position: fixed descendants, not the viewport. The site’s header used backdrop-filter: blur(...) for its translucent glass effect — and the modal happened to be rendered as a DOM descendant of that header. The moment backdrop-filter was present, position: fixed on the modal stopped meaning “relative to the viewport” and started meaning “relative to the 64px header box” instead.

Root-caused via getBoundingClientRect() on the modal at runtime — its reported bounding box exactly matched the header’s own dimensions, not the viewport’s, which was the concrete confirmation this was a containing-block issue rather than a z-index or overflow problem.

The fix

A React portal — rendering the modal into a DOM node attached directly to <body>, outside the header’s subtree entirely, so no backdrop-filter ancestor sits between the modal and the real viewport.

Why this is worth knowing generally

This exact bug class shows up anywhere a blurred/frosted-glass header or card effect is used alongside a fixed-position overlay rendered as its descendant — a very common combination in modern UI design. If a “full-screen” fixed element is mysteriously behaving as if the viewport were much smaller than it is, check every ancestor for backdrop-filter/filter/transform before assuming it’s a z-index or overflow problem.