Los menús desplegables de búsqueda avanzada de la columna derecha están en la esquina superior derecha en lugar de donde los esperaba
Mac (escritorio)
Safari
Buen hallazgo, es uno muy extraño. Solo son los elementos de la columna derecha. Esto está sucediendo en cualquier tema que utilice una imagen de fondo usando
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;
}
}
Veo que también está presente en los temas air y graceful, los cuales hacen esto.
Suposición, pero sospecho que el filtro está cambiando el contexto de apilamiento y podría causar problemas. ¿Se te ocurre una forma diferente de hacer este fondo, Jordan?
Como primer paso, ¿podrías probar sin filter y ver si funciona?
Lo intenté, pero no funciona. Hasta donde sé, adjuntarlo a través de before es la única forma de hacer que esto funcione y que la página/desplazamiento no se vea afectado.
Vaya, qué error más raro. Funciona perfectamente, pero al arreglarlo se rompe. Curiosamente, usar ::after en lugar de :before también funciona…
Intenté probar esto en el inspector, pero cambiar a ::after oculta la imagen de fondo.
Oh, lo siento, no quise decir que eso fuera una solución. Tampoco lo es, solo estaba señalando qué más está relacionado con la rareza.
Básicamente, cualquier cosa que “elimine” la imagen del fondo, ya sea por posicionamiento, después o estableciendo el ancho en 0, “soluciona” el menú desplegable.
Joffrey sospechó que esto podría ser un problema con Safari. Lo realmente extraño es que el inspector muestra que el menú debería colocarse apropiadamente en la pantalla. Los píxeles y los números son correctos.
Esto se hace evidente en Safari si desmarca “fijo” y luego lo vuelve a activar en la colocación del menú, el menú se posiciona correctamente.
Dado que este tipo de caso de uso para imágenes de fondo ha estado vigente desde antes de 2020, me pregunto si esto es reciente, o si esto nunca funcionó y es la primera vez que oímos hablar de ello.
Yo también lo he visto. Nunca antes lo había experimentado. Casi parece que se está posicionando contra coordenadas de vista incorrectas o algo así (aunque las coordenadas translate3d son correctas en el inspector, no coinciden con la posición real) y luego, al volver a aplicar la propiedad, se ha corregido.
Safari tiene un montón de menciones de background-attached:fixed que no funcionan correctamente, podría estar relacionado con eso de alguna manera. Sin embargo, ninguna de las especulaciones ofrece una solución 
Podríamos cambiar el desplegable a position:absolute, sin una traducción, eso funciona. La forma en que se hace ahora es un poco extraña para empezar, en mi opinión.
Sí, este es un buen punto. ¿No debería estar siempre encima o debajo de su cuadro de entrada? Quizás la detección necesaria nos obliga a usar la traducción.
Esto ahora está arreglado.