Исправляем прыжки фона при скрытии адресной строки на мобильных

Быстрый ответ

Хотите устранить скачки фонового изображения в процессе изменения размеров окна браузера? Используйте CSS свойства background-attachment: fixed; и background-size: cover;. Они позволят вам зафиксировать положение фонового изображения и обеспечить его равномерное распределение по всему доступному пространству.

.element {
  background-image: url('image.jpg');
  background-attachment: fixed;
  background-size: cover;
}

Применив указанные стили к элементам, вы обеспечите неизменность позиции фона даже при движении адресной строки.

Способ преодоления проблемы подскакивающей высоты с помощью JavaScript

Проблему с высотой vh в iOS можно решить при помощи JavaScript, динамически подстраивающего высоту элементов. Данный скрипт оперативно корректирует размеры, учитывая изменения в области просмотра.

function resizeBackground() {
  var extraHeight = 60; // Добавляем немного свободного пространства для компенсации изменяемости адресной строки
  document.getElementById('bg1').style.height = window.innerHeight + extraHeight + "px";
  document.getElementById('bg2').style.height = window.innerHeight + extraHeight + "px";
}

window.addEventListener('resize', resizeBackground); // Отслеживаем изменения размеров окна
resizeBackground(); // Инициализируем функцию

Данный код эффективно контролирует изменения размеров окна, быстро реагирует на внезапные изменения и предотвращает визуальные смещения.

Гарантируем плавность движений – плавные переходы

Если применить CSS-property transition, то можно существенно смягчить эффект внезапных изменений расположения элементов на странице. Задержка внесет минимальные коррекции в расположение элементов.

.element {
  transition: height 999999s; // Движение настолько плавное, что почти неразличимо
}

Добавьте это свойство в стили элементов, чтобы изменения размеров происходили максимально плавно и элегантно.

Визуализация

Вот какая проблема подскакивающего фонового изображения может возникнуть в процессе прокрутки страницы, особенно при том, что мобильный браузер скрывает или показывает адресную строку:

Адресная строка видна:
📱======================
| 🖼️                     |
| Фон стабилен           |
| (Не трясется)          |
=========================

Адресная строка скрыта:
📱
| 🖼️                     | <- Фон подскакнул вверх
| Фоновое изображение    |
| (Следует за видимой областью) |
=========================

Используя предложенные CSS-приемы, фон можно зафиксировать на месте, как якорь судно:

📱======================
| 🖼️🔒                  |
| Фоновое изображение    |
| (Не подскакивает)         |
=========================
// Свойство `background-attachment: fixed` надежно "приклеивает" фон на месте.

Целью является сделать так, чтобы фон не подскакивал, а оставался неизменным независимо от того, что происходит с адресной строкой.

SOLID подход к учету особенностей мобильных браузеров

Принимаем во внимание разнообразие соотношений сторон

Устройства с различными соотношениями сторон могут вести себя по-разному, поэтому используйте медиа-запросы CSS для адаптации под специфические размеры и формы экранов.

@media (aspect-ratio: 16/9) {
  .element {
    /* Специальный стиль для экранов 16:9 */
  }
}

@media (aspect-ratio: 3/2) {
  .element {
    /* Персонализированные правила для экранов 3:2 */
  }
}

Тестируйте ваш дизайн на различных устройствах, чтобы обеспечить его корректное отображение.

Подробнее об этом расскажет наш спикер на видео

Обеспечиваем плавный пользовательский опыт на мобильных устройствах

Создайте плавный и стабильный пользовательский опыт, контролируя поток содержимого с помощью свойств overflow для элементов html и body.

html {
  overflow: hidden; // Запрещаем прокрутку
}
body {
  overflow-y: scroll; // Включаем вертикальную прокрутку
}

Такой подход эффективно устраняет смещения фоновых изображений, которые могут возникнуть внезапно.

Используем альтернативные подходы к дизайну

Если нет возможности реализовать идеальное решение, рассмотрите возможность изменения мобильного дизайна в пользу более адаптивных и удобных вариантов. Это может быть отказ от использования фоновых изображений на всю страницу или изменение расположения визуальных элементов для увеличения гибкости интерфейса.

Полезные материалы

1. background-attachment – CSS: Cascading Style Sheets | MDN — Статья на МDN о свойстве background-attachment.
2. Cumulative Layout Shift (CLS) | Articles | web.dev — Статья от Google о принципах восприятия и улучшения совокупного сдвига макета.
3. Speed Up Google Fonts – Harry Roberts – Web Performance Consultant — Методы ускорения загрузки Google Fonts, влияющие на стабильность макета.
4. Web Design Experiments by Jen Simmons — Коллекция экспериментальных веб-дизайнов для вдохновения.
5. Most Reliable App & Cross Browser Testing Platform | BrowserStack — Сервис для тестирования вашего сайта на различных устройствах и платформах.
6. Creating Intrinsic Ratios for Video – A List Apart — Советы по сохранению соотношения сторон видео с целью избежать неожиданных изменений в макете.