The menu that was 0.63 pixels tall

The question

A mobile menu button that toggled correctly — aria-expanded flipped, the panel lost its hidden attribute, body scroll locked — and produced no visible menu.

Setup

The panel was the usual full-screen overlay:

position: fixed;
inset-inline: 0;
bottom: 0;
top: 4.5rem;   /* below the header */

Nested inside a sticky header that gained backdrop-filter: blur(...) when open, for the frosted-glass effect.

Result

Measured height: 0.63 pixels.

backdrop-filter — like transform, filter and perspective — makes an element a containing block for position: fixed descendants. The panel was no longer positioned against the viewport. It was positioned against the 72px header, so top: 4.5rem plus bottom: 0 left it a sliver.

Nothing warns you. The CSS is valid, the JavaScript is correct, and the layout is technically doing exactly what it was told.

Learned

Three properties quietly change what fixed means for everything inside them:

The fix was to drop the blur while the panel is open and use a solid background instead — which also looks better, because a frosted header over a full-screen opaque panel was blurring nothing.

Worth remembering the next time a fixed element behaves as though the viewport moved.