背景透過は効くのに、.menu-panel に backdrop-filter (blur) が効かない

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