Выпадающие списки расширенного поиска в правой колонке отображаются в правом верхнем углу, а не там, где я ожидаю.
Mac (десктоп)
Safari
Хорошее обнаружение, это действительно странная проблема. Затрагивает только элементы в правой колонке. Это происходит на любой теме, использующей фоновое изображение с помощью
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 и посмотри, будет ли это работать.
Я пробовал это, но это не работает. Насколько мне известно, прикрепление через before — это единственный способ заставить это работать и при этом не затрагивать страницу/прокрутку.
Вау, какой странный баг. Absolute работает, а fixed ломает его. Что ещё страннее, использование ::after вместо :before тоже работает…
Я попробовал проверить это в инспекторе, но при переключении на ::after фоновое изображение скрывается.
Ой, извините, я не хотел говорить, что это решение. Ни одно из них не является решением, я просто указывал, что ещё связано с этой странностью.
По сути, всё, что «убирает» изображение из фона — будь то позиционирование, использование псевдоэлемента ::after или установка ширины в 0 — «исправляет» выпадающий список.
Джонни подозревал, что это может быть проблемой Safari. Самое странное, что инспектор показывает, что меню должно располагаться на экране правильно. Пиксели и цифры верны.
На Safari это становится очевидным, если снять галочку «fixed», а затем снова включить её в настройках размещения меню — после этого меню корректно позиционируется.
Поскольку такой сценарий использования фоновых изображений применялся ещё до 2020 года, интересно, является ли это проблемой, возникшей недавно, или же это никогда не работало, и мы впервые об этом слышим.
Я тоже это видел. Никогда раньше такого не встречал. Почти как будто оно позиционируется относительно неправильных координат области просмотра (хотя координаты translate3d в инспекторе верны, они не совпадают с фактическим положением). А когда мы применяем свойство заново, всё исправляется.
В Safari много упоминаний о том, что background-attachment: fixed работает некорректно, возможно, это как-то связано. Ни одно из предположений не предлагает решения 
Мы могли бы изменить выпадающий список на position: absolute без translate — это работает. То, как это сделано сейчас, по-моему, изначально немного странно.
Да, это верное замечание. Разве он не должен всегда располагаться либо выше, либо ниже своего поля ввода? Возможно, именно необходимость детектирования вынуждает нас использовать translate.
Теперь это исправлено.