カテゴリとタグのパンくずリストのドロップダウンの位置の問題

[Decrypt]

こんにちは！カスタムテーマを作成しようとしています。「air theme」をフォークしていくつかの変更を加えましたが、カテゴリとタグのドロップダウンメニューが奇妙な位置に配置されていることに気づきました。

これが原因として考えられることはありますか？テーマのJavaScriptは何も変更しておらず、CSSのみを変更しました。コードはこちらで確認できます：GitHub - Decryptu/discourse-decrypt: A modern theme with a dark mode option.

デフォルトの「air theme」を選択するとドロップダウンメニューが正しい位置に配置されるため、私のテーマに原因があるはずです。「transform」または「inset」プロパティも変更していません。

どなたか助けていただけると幸いです。ありがとうございます！

[awesomerobot (Kris)]

これは少し予期せぬことですが、位置は次のような影響を受けているようです。

html body #main-outlet {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

これらの行を削除すると、問題は解決します。

どうやら backdrop-filter は CSS で新しいブロックコンテキストを作成するようです。詳細はこちらをご覧ください… https://stackoverflow.com/a/52937920/1869753

これは、position:fixed 要素がビューポートではなく、フィルタリングされたコンテナに対して相対的に配置されることを意味します。言い換えれば、それはまだ固定されていますが、その 新しい 包含ブロック（フィルタリングされたコンテナ）の内側にあります。

[Decrypt]

おお、見つけてくれてありがとう。それを取り除くなんて思いもしなかったよ。それらを取り除いて、背景のぼかしの代替案を探してみます。本当にありがとう。