Преодоление ограничений размера фона: обложка в Mobile Safari

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

Для решения этой проблемы появилось умное обходное решение. Проблемное поведение можно исправить, настроив свойство background-attachment для прокрутки в медиазапросе, специально предназначенном для iPhone.

Вот обновленная версия предоставленного кода:

.section {
  margin: 0 auto;
  position: relative;
  padding: 0 0 320px 0;
  width: 100%;
}

#section1,
#section2,
#section3 {
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;

  @media (max-width: @iphone-screen) {
    background-attachment: scroll;
  }
}

При включении этого медиа-запроса свойство background-attachment настроено на прокрутку только для устройств с шириной, меньшей или равной предопределенной переменной @iphone-screen. Это гарантирует, что фоновые изображения на iPhone будут вести себя так, как ожидалось, сохраняя при этом фиксированное положение на больших экранах.

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