Неожиданные полосы прокрутки появляются в мобильной версии сайта ⇐ CSS

[Anonymous]

1. Настройка:
тело { высота: 100вх; ширина: 100vw; маржа: 0; переполнение: скрыто; } .квадрат { высота: 100 пикселей; ширина: 100 пикселей; цвет фона: красный; } 2. Добавьте следующие свойства CSS в .square:

позиция: абсолютная; слева: 100%; верх: 0; 3. Посмотрите на страницу в браузере:

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

Откройте DevTools, затем нажмите «Переключить панель инструментов устройств» (ctrl +shift+m). Теперь попробуйте прокрутить вправо. Вы увидите красную площадь. По какой-то причине вы также можете прокрутить вниз.
снимок экрана (обратите внимание на надпись overflow:hidden, примененную к телу) – на этом снимке экрана страница уже прокручена вправо.

Кроме того, если вы измените left: 100% на right: 100%, все будет работать так, как ожидалось. То же самое работает и для transition: TranslateX().

развернутая версия

То же самое поведение наблюдалось в Edge (на рабочем столе, с включенной панелью инструментов устройства), Samsung Internet и Chrome (мобильном устройстве). Я также проверил это через BrowserStack: проблема сохранялась в Chrome v90, 101 и 105.

Версия Chrome для настольных компьютеров: 120.0.6099.130 (официальная сборка) (64-разрядная версия) (группа: стабильная)

Мобильная версия Chrome: 120.0.6099.144 (официальная сборка) (64-разрядная версия)