Backdrop-filter (blur) has no effect on .menu-panel, even though background transparency works

Contribute UX
1

I’m customizing a long-running custom theme and wanted to give the hamburger/sidebar menu (.menu-panel) the same translucent, blurred look that already works fine on .d-header. Transparency works, but the blur does not — and I’d like to flag this as feedback, since a couple of things about how core styles this component made it harder than expected.

What I’m trying to achieve

A semi-transparent menu panel with a backdrop-filter: blur() behind it, so the page content is still hinted at through the panel, similar to the frosted-glass look many native apps use. Both the see-through effect and the blur matter to me — transparency without blur just looks messy over busy topic lists.

What already works

On .d-header, this is all it takes and it works reliably (tested on iOS Safari and desktop Chrome):

.d-header {
  background-color: color-mix(in srgb, var(--header_background) 50%, transparent);
  -webkit-backdrop-filter: blur(3px) saturate(1.2);
  backdrop-filter: blur(3px) saturate(1.2);
}

What doesn’t work

The exact same recipe applied to .menu-panel gives me the transparency, but never the blur, on iOS Safari:

.menu-panel {
  background-color: color-mix(in srgb, var(--secondary) 85%, transparent) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  backdrop-filter: blur(6px) saturate(1.2);
  border-radius: 14px;
}

Things I tried to make the blur show up, none of which helped:

  • Adding !important to the backdrop-filter/-webkit-backdrop-filter declarations themselves.
  • Forcing a dedicated compositing layer with transform: translateZ(0) combined with overflow: hidden (a common Safari workaround for other backdrop-filter issues) — this made no difference here, so I removed it again rather than keep a hack that wasn’t earning its place.
  • Confirmed I’m targeting the right element: per menu-panel.scss, the opaque background is set directly on .menu-panel (not a child like .panel-body), which I initially got wrong and then corrected.

If anyone knows why .menu-panel behaves differently from .d-header here, or has a working recipe, I’d be glad to hear it.

Second issue: hardcoded backgrounds on individual menu rows

Even with the panel’s own background made transparent, several things inside it still render solid, because core sets their background directly rather than through the panel’s own background:

  • .user-notifications-list .read and .bookmark — read notifications and bookmarks in the user menu get background-color: var(--secondary) directly, so each row shows up as an opaque block floating on the translucent panel.
  • .hamburger-panel .sidebar-footer-wrapper .sidebar-footer-container — the profile/login footer at the bottom of the sidebar has the same issue.

I can (and did) override these in my theme, but it means hunting down every hardcoded var(--secondary) in menu-panel.scss one by one, and it’ll break again the next time core adds a new element with the same pattern. It would help a lot if these fell back to a CSS custom property instead, e.g. something like --d-menu-panel-background defaulting to var(--secondary), so a theme only needs to redefine one variable to make the whole panel — including its rows — consistently transparent, instead of chasing individual selectors.

Happy to share screenshots of the before/after if useful, and to test any suggested fix on my end.

IMG_1129
IMG_11291290×2373 235 KB

IMG_1130
IMG_1130992×2364 241 KB

2

Follow-up question: the same lack of visible transparency/blur now also shows up on another element that shares the .menu-panel styling path — the header search dropdown’s input field (.search-input-wrapper, part of the glimmer search menu).

Recipe (identical pattern to the working .d-header one, and to .menu-panel above):

.search-menu .search-input-wrapper {
  background: color-mix(in srgb, var(--header_background) 85%, transparent) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  backdrop-filter: blur(6px) saturate(1.2);
  border-radius: 14px;
  box-shadow: 0 0 0 1px var(--primary-low-mid);
  overflow: hidden;
}

.search-menu .search-input {
  background: transparent !important;
}

What renders correctly: the hairline border (box-shadow) and the border-radius both show up exactly as expected — so the selector is matching the right element and the rule is applying, not getting silently overridden.

What doesn’t render: no visible translucency and no visible blur of whatever’s behind the field, same symptom as .menu-panel (sidebar/hamburger panel) reported above. .d-header, using the literal same three lines (background-color via color-mix, -webkit-backdrop-filter, backdrop-filter), continues to work fine.

This makes me increasingly suspect it’s not specific to .menu-panel itself, but to something these dropdown/overlay-style elements share (stacking context created elsewhere in core, a compositing layer that isn’t a proper containing block for backdrop-filter, or similar) — rather than anything about our own selector or property values, since the exact same three CSS properties behave differently depending on which core element they’re attached to.

Has anyone run into backdrop-filter/translucent-background not rendering specifically on the search dropdown or other .menu-panel-family overlays, even though the same recipe works on the header?