Как избавиться от полосы внизу веб-страницы в chrome?
На моём проекте начал появляться очень странный баг. Иногда при открытие своего проекта наблюдаю внизу страницы белую полосу. И весь сайт заполняет всё оставшееся пространство (в css коде используются едины vh и по элементам с ними сразу видно, что 100vh когда видно эту полосу равно не реальной высоте всего окна, а оставшейся без полосы). Если в этот момент посмотреть window.innerHeight, то выдаст 937 (у меня 24 дюймовый fhd моник, 100% масштабирование, окно на весь экран). Дальше я сворачиваю окно не на полный экран и обратно и баг пропадает. После этого window.innerheight выдаёт 969 как и должен. Понять когда при каких именно условиях появляется баг я пока не понял. Иногда он есть иногда нет, но чаще всего ловлю его после перезапуска компьютера.
Так же заметил, что на новой вкладке chrome window.innerheight равно 937, как при баге, но там это происходит за счёт отображения панели закладок, вероятно это связано, так как белая полоса подозрительно имеет ровно такую же толщину как и панель закладок.
Хочу ещё заметить, что у меня на проекте нет контента выше высоты экрана. На теге html висит: overflow: hidden; width: 100%; height: 100%; Всё, что выходит за границы экрана имеет position: fixed.
LordGuard, полоса на всех страницах сайта?
Не самое лучшее решение, но можно задать общий цвет для фона, если он одинаковый.
Если есть возможность, я бы попробовал по одному элементу из шаблона убирать (не в консоли, а именно закомментировать в vue template). Смею предположить, что какой-то элемент с position:fixed загружается после того, как страница уже была прогружена, в виду чего страница растягивается и остаётся такая белая полоса.
Figment, решение не подходит, но какому элементу задавать общий фон, если даже html тег находится за пределами полосы? То есть весь вьюпорт находится над полосой.
LordGuard, Округление - это не в CSS, а (сам баг) под "капотом" самого движка Chromium.
Нет, в 1 пиксель и через раз (как-то хаотично). Код страницы - постоянен!
Средний
