D’accord, c’est un peu plus compliqué… lorsqu’un élément comme l’en-tête reçoit un backdrop-filter, il devient la racine de l’effet. Ainsi, tout élément descendant imbriqué dans cette racine (comme les panneaux de menu déroulant) ne peut flouter que ce qui se trouve à l’intérieur de cette racine… il ne peut pas voir le contenu de la page au-delà de l’en-tête, même si les panneaux s’étendent au-delà de celui-ci, donc vous n’obtenez aucun flou là-bas.
Ce que vous pouvez faire à la place, c’est utiliser un pseudo-élément sur l’en-tête pour éviter cette restriction de racine.
.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;
}