Vale, esto es un poco más complicado… cuando un elemento como la cabecera recibe un backdrop-filter, se convierte en la raíz para el efecto. Por lo tanto, cualquier elemento descendiente anidado dentro de esa raíz (como los paneles desplegables) solo puede aplicar el desenfoque a lo que está dentro de esa raíz… no puede ver el contenido de la página más allá de la cabecera, aunque los paneles se extiendan más allá de ella, por lo que no se aplica ningún desenfoque en esa zona.
Lo que puedes hacer en su lugar es usar un pseudoelemento en la cabecera para evitar esta restricción de la raíz.
.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;
}