Ja, das ist etwas komplizierter … Wenn ein Element wie der Header ein backdrop-filter erhält, wird es zur Wurzel für den Effekt. Daher können nachgeordnete Elemente, die innerhalb dieser Wurzel verschachtelt sind (wie die Dropdown-Panel), nur den Inhalt innerhalb dieser Wurzel unscharf darstellen … Sie können den Seiteninhalt jenseits des Headers nicht sehen, selbst wenn die Panels über den Header hinausragen, weshalb dort keine Unschärfe entsteht.
Stattdessen kannst du ein Pseudoelement auf dem Header verwenden, um diese Wurzelbeschränkung zu umgehen.
.d-header {
position: relative;
isolation: isolate;
background-color: transparent;
&::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-color: color-mix(in srgb, var(--header_background) 70%, transparent);
backdrop-filter: blur(12px);
pointer-events: none;
}
}
.menu-panel {
background-color: color-mix(in srgb, var(--secondary) 70%, transparent);
backdrop-filter: blur(12px);
}
.user-menu .quick-access-panel .read {
background: transparent;
}