Superar las limitaciones del tamaño del fondo: portada en Mobile Safari

Los dispositivos iOS presentan un desafío único cuando se trata de implementar imágenes de fondo que cubra elementos completos usando background-size: cover. A pesar del comportamiento esperado, esta propiedad a menudo produce resultados no deseados en estas plataformas.

Para abordar este problema, ha surgido una solución alternativa inteligente. Al ajustar la propiedad de adjunto en segundo plano para desplazarse dentro de una consulta de medios dirigida específicamente a iPhones, se puede corregir el comportamiento problemático.

Aquí hay una versión actualizada del código proporcionado:

.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;
  }
}

Al incluir esta consulta de medios, la propiedad background-attachment se configura para desplazarse solo para dispositivos con un ancho menor o igual a la variable predefinida @iphone-screen. Esto garantiza que las imágenes de fondo se comporten como se espera en los iPhone y mantengan su posición fija en pantallas más grandes.

Esta solución proporciona una manera simple y elegante de manejar este problema común, permitiéndole crear imágenes de fondo perfectas de ancho completo. en todos los dispositivos, incluido iOS.