追記: 以前指摘したように、可視的な透明性/ぼけ効果が表示されないという問題が、.menu-panel のスタイルパスを共有する別の要素にも発生しています。それはヘッダーの検索ドロップダウンのインプットフィールド(.search-input-wrapper、glimmer 検索メニューの一部)です。
レシピ(動作している .d-header のパターン、および上記の .menu-panel と同一のパターン):
.search-menu .search-input-wrapper {
background: color-mix(in srgb, var(--header_background) 85%, transparent) !important;
-webkit-backdrop-filter: blur(6px) saturate(1.2);
backdrop-filter: blur(6px) saturate(1.2);
border-radius: 14px;
box-shadow: 0 0 0 1px var(--primary-low-mid);
overflow: hidden;
}
.search-menu .search-input {
background: transparent !important;
}
正しくレンダリングされているもの: ヘアラインボーダー(box-shadow)と border-radius は、いずれも期待通りに表示されています。つまり、セレクターは正しい要素にマッチしており、ルールは適用されており、サイレントに上書きされているわけではありません。
レンダリングされていないもの: フィールドの背後にあるものの可視的な半透明性やぼけ効果がありません。これは上記で報告された .menu-panel(サイドバー/ハンバーガーパネル)と同様の症状です。.d-header は、リテラルで同じ3行(color-mix を通じた background-color、-webkit-backdrop-filter、backdrop-filter)を使用していますが、引き続き正常に動作しています。
これは、.menu-panel 自体に固有の問題ではなく、これらのドロップダウン/オーバーレイ形式の要素が共有している何かに起因する可能性をますます強く感じさせます(コアの他の場所で生成されるスタッキングコンテキスト、backdrop-filter の適切な包含ブロックではないコンポジットレイヤー、または類似のもの)。正確に同じ3つの CSS プロパティが、どのコア要素に適用されるかによって挙動が異なるため、私達のセレクターやプロパティ値の問題ではないと考えられます。
ヘッダーでは同じレシピが動作しているにもかかわらず、検索ドロップダウンや他の .menu-panel 系のオーバーレイにおいて、backdrop-filter/半透明背景がレンダリングされないという問題に遭遇した方はいますか?