長期間にわたってカスタマイズしてきたテーマを調整しており、ハンバーガー/サイドバーメニュー（.menu-panel）に、.d-header で既に正常に動作している半透明かつぼかし（ブラー）の効果を適用したいと考えています。透明さは機能していますが、ぼかしは効いていません。コアスタイルがこのコンポーネントをどのように処理しているかについていくつか気になる点があるため、フィードバックとして報告しておきます。
達成したいこと
backdrop-filter: blur() を背景に適用し、ページの内容がパネル越しにうっすらと見えるような半透明のメニューパネルを作成することです。多くのネイティブアプリで見られる「フロストガラス（すりガラス）」のような見た目を目指しています。私にとって、透明効果とぼかしはどちらも重要です。ぼかしなしの透明さは、内容の多いトピックリストの上では単に見苦しくなってしまいます。
既に動作していること
.d-header には以下のコードを適用するだけで、信頼性高く動作します（iOS Safari とデスクトップ版 Chrome でテスト済み）：
.d-header {
background-color: color-mix(in srgb, var(--header_background) 50%, transparent);
-webkit-backdrop-filter: blur(3px) saturate(1.2);
backdrop-filter: blur(3px) saturate(1.2);
}
動作していないこと
.menu-panel に全く同じコードを適用すると、iOS Safari では透明性は得られますが、ぼかしは一切効きません：
.menu-panel {
background-color: color-mix(in srgb, var(--secondary) 85%, transparent) !important;
-webkit-backdrop-filter: blur(6px) saturate(1.2);
backdrop-filter: blur(6px) saturate(1.2);
border-radius: 14px;
}
ぼかしを表示させるために試したが、どれも効果がなかったこと：
backdrop-filter / -webkit-backdrop-filter の宣言自体に !important を追加すること。- 専用のコンポジットレイヤーを強制するために
transform: translateZ(0) と overflow: hidden を組み合わせること（他の backdrop-filter 問題に対する一般的な Safari の回避策）— ここでは効果がなく、場所を確保する価値のないハックを残すより、削除した方がよいと判断しました。
- 正しい要素を対象にしていることを確認しました：
menu-panel.scss によると、不透明な背景は .menu-panel 自体に直接設定されており（.panel-body のような子要素ではなく）、当初はこれを誤っていましたが、後に修正しました。
もし .menu-panel が .d-header と異なる挙動をする理由を知っている方、あるいは動作するレシピを持っている方がいれば、ぜひ教えてください。
2番目の問題：個別のメニュー行にハードコードされた背景
パネル自体の背景を透明にしても、内部のいくつかの要素は依然として不透明にレンダリングされます。これはコアがパネルの背景を通じてではなく、それらの背景を直接設定しているためです：
.user-notifications-list .read と .bookmark — ユーザーメニュー内の既読通知とブックマークに background-color: var(--secondary) が直接設定されており、各々が半透明パネルの上に浮かぶ不透明なブロックとして表示されます。.hamburger-panel .sidebar-footer-wrapper .sidebar-footer-container — サイドバー下部のプロファイル/ログインフッターにも同じ問題があります。
これらは私のテーマでオーバーライド可能（実際に行いました）ですが、menu-panel.scss 内のハードコードされた var(--secondary) を1つずつ探し出す必要があり、コアが同じパターンで新しい要素を追加した際にまた壊れてしまいます。これらが CSS カスタムプロパティにフォールバックするようにすると非常に助かります。例えば、デフォルトが var(--secondary) である --d-menu-panel-background のようなものです。これにより、テーマ側では1つの変数を再定義するだけで、個別のセレクタを追いかけることなく、行を含むパネル全体が一貫して透明になります。
必要であれば、修正前後のスクリーンショットを共有したり、提案された修正を私の環境でテストしたりすることも可能です。
「いいね！」 1
追記: 以前指摘したように、可視的な透明性/ぼけ効果が表示されないという問題が、.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/半透明背景がレンダリングされないという問題に遭遇した方はいますか？
問題は、各既読通知に個別の背景色が設定されており、それもオーバーライドする必要がある点です。これは他の変更に加えて役立つはずです。
.user-menu .quick-access-panel .read {
background: transparent;
}
検索入力欄も同様で、そこに個別に背景色が適用されているため、それを削除する必要があります。
.search-menu .search-input, .search-menu-container .search-input {
background: transparent;
}
こうしたCSSの変更を行う方法を段階的に説明するガイドがありますので、参考になるかもしれません。Making custom CSS changes on your site
「いいね！」 1
ありがとうございます！— 両方の修正が説明どおり完璧に機能しました。
同じ問題に直面している方のために補足すると、投稿された2つのオーバーライドに加えて、.search-menu-panel 内にネストされた .results 要素が .menu-panel に依存せず、独自の不透明な背景を描画していたため、これにも同じ処理が必要でした：
.search-menu-panel .results {
background: transparent !important;
}
これとあなたの2つのスニペットを組み合わせることで、サイドバー、ハンバーガーメニューパネル、クイックアクセス通知、そして検索結果リストを含む完全な検索ドロップダウン全体で、透明性がきれいに機能するようになりました。テキストもすべて非常に読みやすく、不透明度に関する問題は完全に解決しました。
唯一、まだ未解決なのは、このスレッドの元々のトピックである backdrop-filter / ぼかし自体です。すべての背景が正しく透明になったにもかかわらず、これらの要素にはいまだにぼかしが表示されず、以前と同じ症状が続いています。一方、同じ backdrop-filter の設定が正常にレンダリングされる .d-header とは対照的です。つまり、透明性の問題は解決しましたが、ぼかしの問題は依然としてオープンなままです。
この件を詳しく調べてくださり、本当にありがとうございました。
「いいね！」 1
はい、これはもう少し複雑です… ヘッダーのような要素に 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;
}
「いいね！」 1
