Вопрос:
этот CSS получает мой фон, чтобы заполнить 100% высоты экрана в iOS, но есть небольшая проблема – когда вы прокручиваете вниз, изначально пустое пространство, тогда, когда вы отпускаете палец и прекращаете прокрутку, фоновое изображение “настраивает”, и снова заполняет 100% высоты экрана. Проблема не возникает повторно на одной странице, если вы продолжаете прокручивать ее только в первый раз. Может ли кто-нибудь помочь? Благодаря
#background { background: url(../img/background.jpg) center repeat-x; position: fixed; background-size: auto 100%; top: 0; left: 0; right: 0; bottom: 0; z-index: -1 } Лучший ответ:
Это происходит потому, что ваш элемент #background установлен в “следовать” высоте окна:
#background { … position: fixed; top: 0; bottom: 0; … }
Но, window в Safari меняет свой размер при первом прокрутке содержимого с 460px до 529px:
Как вы можете видеть на этих снимках экрана, при загрузке веб-страницы window.innerHeight равен 460px (на iPhone5). Затем, когда вы начнете прокручивать страницу вниз, пока ваш палец коснется экрана, window.innerHeight увеличен до 529px, но контент еще не обновлен. Только когда палец освобождается от экрана, элемент #background обновляется с новой высотой окна, которая равна 529px.
Чтобы устранить эту проблему, вы должны убедиться, что элемент #background выше начальной высоты окна на 529-460 = 69px. Или элемент #background имеет постоянную высоту 529px (или выше):
#background { … position: fixed; top: 0; bottom: -69px; … }
ИЛИ
#background { … position: fixed; top: 0; /* use height instead of bottom */ height: 529px; … }
Вот окончательный код, который исправляет эту проблему:
<!doctype html> <html> <head> <meta charset=»utf-8″> <title>Fixed background</title> <meta name=»viewport» content=»width=device-width, initial-scale=1.0″ /> <link rel=»stylesheet» href=»css/styles.css?v=1.0″> <style> #background { background: url(bkgd.png) repeat; position: fixed; background-size: 100% auto; top: 0; left: 0; right: 0; bottom: -69px; z-index: -1; } </style> </head> <body> <div id=»background»></div> <div style=»height: 5000px;»></div> </body> </html> Ответ №1
Я только что решил эту проблему. Проблема для меня заключалась в том, что пробел показывался, когда у меня был тег моего тела с фоновым изображением, с установленным размером фона. Чтобы исправить эту проблему, я установил:
background-size: 100vw 100vh;
Затем установите для медиа-запроса, с которым у меня возникла проблема:
{background-size: cover;} Ответ №2
Попробуйте использовать единицы просмотра в фоновом режиме
background-size: 100vw 100vh;
Но сначала добавьте метатег viewport на вашу страницу:
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″ />
Примечание:
Установки vw и vh не поддерживаются полностью, проверьте поддерживаемые браузеры здесь.
Ответ №3
Почему бы не использовать фоновый размер: обложка. Таким образом, фоновое изображение всегда будет заполнять прикрепленный тег div или body
Ответ №4
<name=»viewport» content=»width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,» />
тело {
background-size: cover;
}
Ответ №5
Вы можете исправить это, используя длительные задержки перехода, чтобы предотвратить изменение размера элемента.
например:
transition: height 250ms 600s; /*10min delay*/
Компромисс с этим заключается в том, что он предотвращает изменение размера элемента, включая поворот устройства, однако вы можете использовать некоторые JS для обнаружения изменения ориентации и reset высоты, если это было проблемой.
Ответ №6html, body { display: block; height: 100%; width: 100%; } body { background-image: url(‘some/image.jpg’); background-repeat: repeat-x; background-attachment: fixed; background-position: center center; background-size: contain; }
