Surmonter les limites de la taille de l'arrière-plan : couverture dans Mobile Safari

Les appareils iOS présentent un défi unique lorsqu'il s'agit de mettre en œuvre des images d'arrière-plan qui couvrir des éléments entiers en utilisant background-size: cover. Malgré le comportement attendu, cette propriété produit souvent des résultats indésirables sur ces plates-formes.

Pour résoudre ce problème, une solution de contournement astucieuse a émergé. En ajustant la propriété background-attachment pour faire défiler une requête multimédia ciblant spécifiquement les iPhones, le comportement problématique peut être corrigé.

Voici une version mise à jour du code fourni :

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

En incluant cette requête multimédia, la propriété background-attachment est définie pour défiler uniquement pour les appareils dont la largeur est inférieure ou égale à la variable prédéfinie @iphone-screen. Cela garantit que les images d'arrière-plan se comportent comme prévu sur les iPhones tout en conservant leur position fixe sur des écrans plus grands.

Cette solution offre un moyen simple et élégant de gérer ce problème courant, vous permettant de créer des images d'arrière-plan transparentes sur toute la largeur. sur tous les appareils, y compris iOS.