Os menus suspensos de pesquisa avançada da coluna da direita estão no canto superior direito, em vez de onde eu esperava.
Mac (desktop)
Safari
Boa descoberta, este é um problema muito estranho. São apenas os itens na coluna da direita. Isso está acontecendo em qualquer tema que utilize uma imagem de fundo 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;
}
}
Eu vejo que isso também está presente nos temas air e graceful, que ambos fazem isso.
Palpite, mas suspeito que o filtro esteja alterando o contexto de empilhamento e possa causar problemas? Você consegue pensar em uma maneira diferente de fazer esse plano de fundo, Jordan?
Como primeiro passo, você poderia tentar sem filter e ver se funciona?
Eu tentei isso, mas não funciona. Pelo que sei, anexá-lo via before é a única maneira de fazer isso funcionar e não ter a página/rolagem afetada.
Que bug esquisito. Funciona perfeitamente, mas corrigi-lo o quebra. Estranhamente, usar ::after em vez de :before também funciona…
Tentei testar isso no inspetor, mas mudar para ::after oculta a imagem de fundo.
Ah, desculpe, eu não quis dizer que isso era uma solução. Nem é, eu estava apenas apontando o que mais está relacionado à estranheza.
Basicamente, qualquer coisa que “remove” a imagem do fundo, seja posicionamento, after, ou definir a largura para 0, “corrige” o dropdown.
Joffrey suspeitou que isso poderia ser um problema com o Safari. O que é realmente estranho é que o inspetor mostra que o menu deveria ser posicionado adequadamente na tela. Os pixels e os números estão corretos.
Isso fica evidente no Safari se você desmarcar “fixed” e depois ativá-lo novamente na posição do menu, o menu então é posicionado corretamente.
Como esse tipo de caso de uso para imagens de fundo está em vigor desde antes de 2020, eu me pergunto se isso é recente, ou se isso nunca funcionou, e esta é a primeira vez que ouvimos falar disso.
Eu também já vi isso. Nunca tinha experimentado antes. Parece que ele está se posicionando contra coordenadas de viewport erradas ou algo assim (mesmo que as coordenadas translate3d estejam corretas no inspetor, elas não correspondem à posição real) e então, quando reaplicamos a propriedade, ele se corrige.
O Safari tem um monte de menções sobre background-attached:fixed não funcionar corretamente, pode estar relacionado a isso de alguma forma. Nenhuma das especulações oferece uma solução 
Poderíamos mudar o dropdown para position:absolute, sem um translate, isso funciona. A maneira como é feito agora é um pouco estranha para começar, na minha opinião.
Sim, este é um bom ponto. Não deveria sempre estar acima ou abaixo da sua caixa de entrada? Talvez a detecção necessária nos force a usar translate.
Isso agora está corrigido.