説明
右列の高度な検索ドロップダウンが、期待される場所ではなく右上隅に表示されています。
再現手順
- MacのSafariを使用する
- 「Meta Branded」テーマを使用する
- ここにアクセスする: Search results for '' - Discourse Meta
- 右列のメニューのいずれかをクリックする
プラットフォーム
Mac (デスクトップ)
ブラウザ
Safari
「いいね！」 4
素晴らしい発見ですね。これは本当に奇妙な問題です。右側の列の項目だけに影響しています。これは、次のような背景画像を使用するどのテーマでも発生しています。
body::before {
content: "";
display: block;
position: fixed;
width: 100%;
height: 100%;
filter: brightness(var(--brightness));
background-image: url($blobs-other), url($blobs-yellow), url($blue-wave);
background-size: 103vw, 103vw, 100vw;
background-repeat: no-repeat;
background-position: 50% 125%, 0px 95px, 0px 175px;
@media screen and (max-width: 1000px) {
background-attachment: scroll;
}
@media screen and (max-width: 800px) {
background-size: 103vw, 103vw, 200vw;
background-position: 50% 125%, 0px 95px, 0px 175px;
}
}
AirテーマとGracefulテーマでもこれが見られます。どちらも同様のことを行っています。
推測ですが、filter がスタッキングコンテキストを変更し、問題を引き起こしているのではないでしょうか？この背景を別の方法で行う方法を考えられますか、ジョーダン？
最初のステップとして、filter なしで試してみて、機能するかどうか確認してもらえますか？
「いいね！」 1
それを試しましたが、うまくいきませんでした。私の知る限り、before を介してアタッチするのが、ページ/スクロールに影響を与えずにこれを機能させる唯一の方法です。
なんて奇妙なバグだろう。絶対的に機能するが、修正すると壊れる。奇妙なことに、:beforeの代わりに::afterを使用しても機能する…
インスペクターでこれをテストしてみましたが、::after に切り替えると背景画像が非表示になります。
すみません、それは解決策ではないと言いたかったのです。これも解決策ではありません。奇妙なことに関連する他のことを指摘していただけです。
基本的に、位置決め、after、または幅を0に設定することによって、画像を背景から「削除」するものはすべて、ドロップダウンを「修正」します。
「いいね！」 1
ジョフリーは、これがサファリの問題である可能性があると疑っていました。奇妙なのは、インスペクタはメニューが画面上に適切に配置されているはずであることを示していることです。ピクセルと数値は正しいです。
これはサファリで、「fixed」のチェックを外してからメニュー配置で再度オンにすると、メニューが正しく配置されることで明らかになります。
このような背景画像の使用例は2020年以前から存在しているため、これは最近のことなのか、それともこれまで機能したことがなく、今回初めて耳にするのか疑問に思っています。
私もそれは見ました。以前は経験したことがありません。あたかもビューポートの座標が間違っているために、それ自体が位置決めされているかのようです（インスペクターではtranslate3dの座標は正しいのですが、実際の位置とは一致しません）。そして、プロパティを再適用すると、自己修正されます。
Safariにはbackground-attached:fixedが正しく機能しないという言及がたくさんありますが、それが何らかの形で関連している可能性があります。しかし、憶測のどれも修正策を提示していません 
ドロップダウンをposition:absoluteに変更し、translateなしにすることもできます。そうすれば機能します。今のやり方は、私としては最初から少し奇妙だと思います。
「いいね！」 1
はい、これは良い点です。常に入力ボックスの上か下にあるべきではありませんか？おそらく、検出が必要なため translate を使用しなければならないのでしょう。
「いいね！」 1
これは修正されました。