#html #css #background-image #viewport
Вопрос:
Здравствуйте, у меня есть веб-сайт по адресу: https://nusstudios.com
Если вы посмотрите на блог с мобильного устройства (например, iOS) и прокрутите его вверх и вниз, вы обнаружите хорошо известное заикание из-за изменения размера окна просмотра. Это связано со следующими настройками моего элемента background div:
background-image: url("../images/leder.jpg");
background-position: center;
background-size: cover;
z-index: -1;
position: fixed;
top: auto;
height: 100vh;
left: 0;
right: 0;
bottom: 0;
Он был предназначен для покрытия всего видового экрана, но на мобильных устройствах размер видового экрана динамически меняется, и поэтому, когда он увеличивается, верхняя часть отображаемого изображения расширяется, что происходит не сразу, поэтому это приводит к очень ошибочному виду.
Я уже рассматривал совершенно новый дизайн, который не требует такого фона, но, может быть, есть обходной путь?
Я слышал, что это можно решить, применив некоторый переход к свойству высоты или размера изображения, но, похоже, это не сработало:
transition: height 0.5s linear;
Также я исправляю, насколько мне известно, предотвращение скрытия адреса и строки меню, и это очень широко применяемое решение, но оно отнимает ценное пространство на экране на небольших устройствах. Можем ли мы сделать лучше?
Ответ №1:
Добавление tranform: scale(1.0) немедленно решает проблему. Я не знаю почему, но это так. Поскольку я внес это изменение, вы больше не найдете проблему на моем сайте, хотя все равно было бы очень здорово узнать, почему это работает.