Les listes déroulantes de recherche avancée de la colonne de droite se trouvent dans le coin supérieur droit au lieu de là où je m’attendais à les trouver.
Mac (bureau)
Safari
Bonne trouvaille, c’est vraiment étrange. Ce sont seulement les éléments de la colonne de droite qui sont affectés. Cela se produit sur tous les thèmes qui utilisent une image d’arrière-plan avec
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;
}
}
Je vois que c’est également présent sur les thèmes air et graceful, qui font tous deux cela.
Devinette, mais je soupçonne que le filtre change le contexte d’empilement et pourrait causer des problèmes ? Peux-tu penser à une autre façon de faire ce fond Jordan ?
Pour commencer, pourrais-tu essayer sans filter et voir si cela fonctionne ?
J’ai bien essayé cela, mais ça ne fonctionne pas. À ma connaissance, le rattacher via before est la seule façon d’y parvenir et de ne pas affecter la page/le défilement.
Quelle bizarrerie de bug. Fonctionne absolument, mais la correction le casse. Curieusement, utiliser ::after au lieu de :before fonctionne aussi…
J’ai essayé de tester cela dans l’inspecteur, mais passer à ::after masque l’image d’arrière-plan.
Oh désolé, je ne voulais pas dire que c’était une solution. Ce n’est pas le cas non plus, je soulignais juste ce qui d’autre est lié à cette bizarrerie.
En gros, tout ce qui “retire” l’image de l’arrière-plan, que ce soit le positionnement, l’attribut after, ou la définition de la largeur à 0, “corrige” le menu déroulant.
Joffrey soupçonnait que cela pourrait être un problème avec Safari. Ce qui est vraiment étrange, c’est que l’inspecteur montre que le menu devrait être placé de manière appropriée à l’écran. Les pixels et les chiffres sont corrects.
Ceci est rendu évident sur Safari si vous décochez « fixed » puis que vous le réactivez dans le placement du menu, le menu est alors correctement positionné.
Étant donné que ce type d’utilisation pour les images d’arrière-plan est en vigueur depuis avant 2020, je me demande si c’est récent, ou si cela n’a jamais fonctionné et que c’est la première fois que nous en entendons parler.
Je l’ai aussi vu. Je n’ai jamais rencontré cela auparavant. On dirait qu’il se positionne par rapport à de mauvaises coordonnées de fenêtre d’affichage ou quelque chose comme ça (même si les coordonnées translate3d sont correctes dans l’inspecteur, elles ne correspondent pas à la position réelle) et ensuite, lorsque nous réappliquons la propriété, il se corrige de lui-même.
Safari mentionne un tas de cas où background-attached:fixed ne fonctionne pas correctement, cela pourrait y être lié d’une manière ou d’une autre. Aucune des spéculations n’offre de solution cependant 
Nous pourrions changer le menu déroulant en position:absolute, sans translate, cela fonctionne. La façon dont c’est fait maintenant est un peu étrange pour commencer, à mon avis.
Ouais, c’est un bon point. Ne devrait-il pas toujours être soit au-dessus, soit en dessous de sa boîte de saisie ? Peut-être que la détection nécessaire nous oblige à utiliser la translation.
Ceci est maintenant corrigé.