Backdrop-filter (blur) не работает для .menu-panel, хотя прозрачность фона действует

[awesomerobot (Kris)]

Хорошо, это немного сложнее… когда элемент, например шапка, получает backdrop-filter, он становится корнем для эффекта. Поэтому любой вложенный в этот корень элемент (например, выпадающие панели) может размывать только то, что находится внутри этого корня… он не может «увидеть» контент страницы за пределами шапки, даже если панели выходят за её границы, поэтому в этих областях размытия не будет.

Вместо этого вы можете использовать псевдоэлемент на шапке, чтобы обойти это ограничение корня.

.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;
}