Ширина страницы вызывает автоматическую прокрутку к верху при доступе к выпадающим спискам поиска/пользователя/гамбургера (только Chrome)

Поддержка
1

Использую community.home-assistant.io с Chrome версии 95.0.4638.54 (официальная сборка) (64-разрядная). Сталкиваюсь с необычной проблемой, которая проявляется только на моём домашнем компьютере. Рабочий компьютер, похоже, работает нормально, однако я не знаю текущую версию Chrome.

Суть проблемы:

При нажатии на поиск, кнопку меню (три вертикальные линии) или значок профиля страница автоматически прокручивается к верху текущей полосы прокрутки вместо отображения выпадающего списка.

Проблема возникает только тогда, когда выпадающий список отделяется от правого края экрана, образуя зазор между ним и вертикальной полосой прокрутки. Это происходит примерно на отметке 1350 пикселей по оси X, включая вертикальную полосу прокрутки.

2021-10-28_17-29-14

РЕДАКТИРОВАНИЕ: Выпадающий список отображается в отсоединённом виде только тогда, когда вы находитесь в самом верху страницы (Пост 1):

image
image1348×976 98.5 KB

На 3 пикселя меньше…

2021-10-28_17-30-50

2

Если вы не можете воспроизвести это здесь или на try.discourse.org, то с очень большой вероятностью проблема связана с вашей темой CSS и макетом. Также попробуйте запустить в безопасном режиме.

3

Это происходит и здесь.

2021-10-28_17-37-26

4

Также происходит в безопасном режиме

5

У меня не получается воспроизвести эту проблему. Какие конкретные шаги нужно выполнить? У меня очень широкий браузер, я прокрутил страницу этого обсуждения вниз, нажал на аватар, но страница не прокручивается к началу.

6

На самом деле, ничего сложного. Просто увеличьте размер окна браузера. К слову, на том же компьютере в Edge это не происходит. Только в Chrome.

Инструменты разработчика в безопасном режиме не показывают ничего, кроме сообщения, которое может быть, а может и не быть связанным с проблемой:

7

У вас установлены какие-либо расширения браузера? Можете попробовать открыть в режиме инкогнито?

8

Переклассифицирую как запрос поддержки, пока хотя бы один другой человек не сможет воспроизвести проблему. Я точно не могу, и я использую Chrome на Windows.

9

Происходит и в режиме инкогнито.

10

К сведению, запущена версия 2.8.0.beta7

11

Ещё одна важная деталь: это на 100% началось после планового обновления Windows и перезагрузки. ОС: Windows 10 Pro, сборка 19042.1288, опыт 120.2212.3920.0.

12

У меня тоже актуальные версии Windows и Chrome

image
image1746×482 41.2 KB

Я пробовал изменять размер окна множеством способов, но не могу воспроизвести эту проблему…

13

У вас есть ссылки для настройки сервера разработки, где я могу отладить проблему? Обычно это настраивается через VSCode или Visual Studio?

14

У нас уже сообщали о том же самом.
Версия 95.0.4638.54 (Официальная сборка) (64-разрядная)
Он также пытался использовать сочетания клавиш, но проблема осталась прежней.

15

Я тоже наблюдаю такое же поведение в Chrome, но не в Firefox

16

Я готов попробовать что угодно, и я занимаюсь разработкой уже несколько лет. Этот баг меня просто бесит. Любые подсказки, ссылки или что-либо ещё, что поможет найти корень проблемы, будут крайне полезны, особенно учитывая, что вы не можете воспроизвести эту ошибку.

17

Сегодня я обновил Chrome на рабочем столе и столкнулся с этой проблемой. Это должно её исправить.

Больше подробностей в описании PR. Исправление уже доступно на Meta.

18

Я немного подробнее изучил этот вопрос и сумел найти причину проблемы. Эта ошибка — и несколько других, связанных с CSS sticky — возникает только в том случае, если в Chrome включена функция

Experimental Web Platform features

в разделе Chrome flags. Это объясняет, почему проблема проявлялась только у некоторых пользователей, даже при одинаковой версии Chrome.

Если вы сталкиваетесь с этой проблемой, убедитесь, что она отключена здесь:

chrome://flags/#enable-experimental-web-platform-features

Я отправил PR для отмены вышеупомянутого изменения, так как оно больше не требуется.