Die Dropdown-Menüs für die erweiterte Suche in der rechten Spalte befinden sich in der oberen rechten Ecke, anstatt dort, wo ich sie erwarte.
Mac (Desktop)
Safari
Guter Fund, das ist wirklich seltsam. Es sind auch nur die Elemente in der rechten Spalte betroffen. Das passiert bei jedem Theme, das ein Hintergrundbild verwendet, mit
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;
}
}
Ich sehe, dass es auch bei den Themes “Air” und “Graceful” vorhanden ist, die beide dies tun.
Nur eine Vermutung, aber ich vermute, dass filter den Stapelkontext ändert und Probleme verursachen könnte? Kannst du dir eine andere Möglichkeit ausdenken, diesen Hintergrund zu machen, Jordan?
Könntest du als ersten Schritt versuchen, es ohne filter zu versuchen und sehen, ob es funktioniert?
Ich habe das versucht, aber es funktioniert nicht. Soweit ich weiß, ist das Anhängen über before die einzige Möglichkeit, dies zum Laufen zu bringen und die Seite/das Scrollen nicht zu beeinträchtigen.
Wow, was für ein seltsamer Fehler. Absolut funktioniert, aber die Korrektur macht es kaputt. Seltsamerweise funktioniert die Verwendung von ::after anstelle von :before auch…
Ich habe versucht, dies im Inspektor zu testen, aber der Wechsel zu ::after blendet das Hintergrundbild aus.
Oh Entschuldigung, das sollte keine Lösung sein. Das ist auch keine, ich wollte nur darauf hinweisen, was sonst noch mit der Seltsamkeit zusammenhängt.
Im Grunde “behebt” alles, was das Bild vom Hintergrund “entfernt”, sei es durch Positionierung, nach oder durch Setzen der Breite auf 0, das Dropdown.
Joffrey vermutete, dass dies ein Problem mit Safari sein könnte. Was wirklich seltsam ist, ist, dass der Inspektor zeigt, dass das Menü richtig auf dem Bildschirm platziert sein sollte. Die Pixel und Zahlen sind korrekt.
Dies wird in Safari deutlich, wenn Sie „fixed“ deaktivieren und dann in der Menüplatzierung wieder aktivieren, dann ist das Menü richtig positioniert.
Da diese Art der Verwendung von BG-Bildern seit vor 2020 besteht, frage ich mich, ob dies neu ist oder ob dies nie funktioniert hat und wir dies zum ersten Mal hören.
Das habe ich auch schon gesehen. Habe ich noch nie erlebt. Es fühlt sich fast so an, als würde es sich gegen falsche Viewport-Koordinaten positionieren oder so (obwohl die translate3d-Koordinaten im Inspektor korrekt sind, stimmen sie nicht mit der tatsächlichen Position überein) und dann, wenn wir die Eigenschaft erneut anwenden, hat es sich selbst behoben.
Safari hat eine ganze Reihe von Erwähnungen, dass background-attached:fixed nicht richtig funktioniert, könnte das irgendwie damit zusammenhängen. Keine der Spekulationen bietet jedoch eine Lösung 
Wir könnten das Dropdown auf position:absolute ändern, ohne eine Übersetzung, das funktioniert. Die Art und Weise, wie es jetzt gemacht wird, ist meiner Meinung nach von Anfang an etwas seltsam.
Ja, das ist ein guter Punkt. Sollte es nicht immer entweder über oder unter seinem Eingabefeld liegen? Vielleicht zwingt uns die Erkennung, die wir verwenden, zur Übersetzung.
Dies ist jetzt behoben.