배경 투명도는 적용되는데 .menu-panel에 backdrop-filter(blur)가 작동하지 않음

[awesomerobot (Kris)]

네, 이건 좀 더 복잡한 문제입니다… 헤더와 같은 요소에 backdrop-filter가 적용되면 해당 요소가 효과의 루트(root)가 됩니다. 따라서 그 루트 안에 중첩된 하위 요소(드롭다운 패널 등)는 루트 내부의 내용물만 흐릿하게 만들 수 있습니다. 패널이 헤더를 벗어나더라도 헤더 너머의 페이지 콘텐츠는 볼 수 없기 때문에, 해당 영역에서는 흐림 효과가 적용되지 않습니다.

대신 이 루트 제한을 피하려면 헤더에 가상 요소(pseudo element)를 사용하는 것이 좋습니다.

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