На полноэкранном фоне CSS отображается белая полоса внизу при прокрутке на мобильном устройстве
У меня есть сайт с полноэкранным фоновым изображением.
html, body {
height: 100vh;
}
html {
background: url('/img/background.jpg') no-repeat center center fixed;
background-size: cover;
}
Этот код отлично работает на большинстве устройств, но на некоторых старых устройствах Android это вызывает проблемы при прокрутке вниз. При частичной прокрутке вниз, но не отпускании пальца отображается белая полоса, равная по размеру строке URL-адреса, которая одновременно исчезает. Как только вы отпустите палец, фон исправится.
Вот как выглядит изображение в середине прокрутки.

Есть ли способ убедиться, что фон всегда заполняет страницу?
Изменить: я также попытался добавить div со следующими свойствами:
#background {
background: url('/img/background.jpg') no-repeat center center fixed;
background-size: cover;
z-index: -100;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 200vh;
}
Это показывает фон, но возникает та же проблема.
Ответы
На IOS и более новых устройствах Android vh был исправлен, поэтому 100vh всегда является высотой между нижней частью минимальной верхней панели и нижней частью экрана.
В старых устройствах это было не так, поэтому vh изменяется, когда пользователь избавляется от некоторых верхних панелей браузера с помощью прокрутки.
Это исправление было введено для предотвращения наблюдаемого вами явления и потенциального «скачка» размеров элементов при прокрутке. Это создало еще одну проблему, заключающуюся в том, что не весь ваш фон будет отображаться, когда пользователь впервые заходит на страницу.
В вашем случае это не заметно из-за сплошного цвета на некотором расстоянии внизу изображения. Было бы важно, если бы внизу был текст.
Возможно, вы могли бы обойти свою проблему, имея абсолютно размещенный элемент или псевдоэлемент, который имел тот же фон, но на 100vh плюс немного. Это может сработать, т.е. это дает видимое соединение, учитывая характер вашего изображения.
Я понимаю, что это не общее решение.
Вы можете попробовать использовать псевдоэлемент, это может быть немного поработать, но потенциально может решить проблему, например
html, body {
height: 100vh;
width: 100vw;
position: relative;
z-index: 2;
}
body::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background: url('/img/background.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
z-index: 1;
}
Попробуй это. Это заставит ваш фон всегда заполнять страницу
html, body {
height: 100vh;
}
html {
background: url('/img/background.jpg') no-repeat center center fixed;
background-size: cover;
position: absolute;
}
Что, если вы просто установите основной фон приложения как черный и расширите фоновую фотографию с помощью небольшой черной полосы? Это похоже на ошибку / функцию Android.
Вы пробовали это:
html {
min-height: 100vh;
}
Это предлагается в приведенном ниже вопросе ссылки, который, похоже, похож на вашу проблему:
https://stackoverflow.com/a/47372972/6119844
Я не знал, как это сделать, поэтому посмотрел. Safariимеет тенденцию делать это на всех веб-сайтах, но вы можете исправить это для своего случая. Я нашел несколько похожих вопросов Stack Overflowо том, как это исправить. Я представлю некоторые из решений ниже:
Добавьте класс прокрутки к своему фону
html,
body {
height: 100%;
margin: 0;
overflow: hidden;
}
.scroll {
overflow: auto;
height: 100%;
}
Предотвратить прокрутку переполнения
html,
body {
-webkit-overflow-scrolling: auto;
}
Использование библиотеки iNoBounce
Эту библиотеку можно найти здесь . Это должно быть вашим последним средством в случае, если другие методы не работают. Владельцы не выпускали новое обновление с 2018 года, но пока оно отработало мои тесты. Удачного кодирования :)
попробуйте следующее: 420 - это обычный размер экрана для мобильных устройств. ??? зависит от высоты ваших элементов
@media screen and (max-width: 420px) {
.sampleCSSclass {
height: calc(100vh - ????px);
}
}
Если полоса прокрутки полностью не используется, вы можете добавить переполнение, скрытое в теле, и никакого переполнения не будет видно. Попробуйте установить для полей и отступов значение 0
Это из-за того, что height: 100vh;
вам нужно увеличить рост. Может тебе стоит попробовать height:100%
или попробоватьmin-height: 100vh;
Используйте -webkit-fill-available
https://css-tricks.com/css-fix-for-100vh-in-mobile-webkit/
У меня была аналогичная проблема: мне приходилось рассчитывать высоту тела без панели инструментов сафари. придумал это решение. Не знаю, работает ли он на вас тоже или нет:
корпус {высота: 100vh; высота: calc (var (- vh, 1vh) * 100); }