background-size: la couverture ne fonctionne pas sur iOS

C'est mon code:

background-color:#fff; background-attachment:fixed; background-repeat:no-repeat; background-size:cover; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-position: center center;

Il fonctionne sur ordinateur de bureau, iPad et mobile Android:

travail

Sur Chrome et Safari sur iPhone, l'arrière-plan est trop grand:

trop grand

Cela arrive lorsque vous avez background-attachment:fixed . Sur mobile, je mets généralement l' background-attachment:scroll @media background-attachment:scroll intérieur d'une requête @media .

Comme l'a souligné @RyanKimber , les images attachées fixes utilisent toute la taille <body> . Sur mobile, cela peut devenir vraiment grand, ce qui souffle votre image. Le réglage de la pièce jointe pour scroll permet à votre image de couverture de s'étirer dans son propre conteneur.

Élaborer la réponse de Ryan, sans append de nouveau nœud html ou utiliser les requêtes @media , en utilisant un seul css .

Si vous voulez garder un fond de cover fixed sur tous les appareils y compris iOS, sans append un nouveau noeud, alors l'astuce consiste à faire le positionnement fixe sur l'élément lui-même et non l'background, car un fond et une couverture fixes dimensionnement mess jusqu'à iOS.

Il fonctionne en production comme un charme sur iOS aussi: https://www.doklist.com/

Ce code ne fonctionnera pas, car iOS utilise la hauteur du document et non la viewport :

 body { background: url(http://img.iosberry.com/ios/trolltunga.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

Maintenant, c'est la magie, le body:after est fixé, et non le fond :

 body:after{ content:""; position:fixed; /* stretch a fixed position to the whole screen */ top:0; height:100vh; /* fix for mobile browser address bar appearing disappearing */ left:0; right:0; z-index:-1; /* needed to keep in the background */ background: url(http://img.iosberry.com/ios/trolltunga.jpg) center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

Cela m'a causé un certain nombre de problèmes aussi. Le problème est que iOS utilise toute la hauteur et la largeur du corps au lieu de la window pour décider de la taille.

Notre solution était de créer un nouveau <div class="backdrop"></div> .

Nous appliquons l'arrière-plan à cette div et lui donnons la position: absolue; en haut: 0; en bas: 0; gauche: 0; droite: 0.

Puisque cette div est maintenant la taille de la window, background-size: cover fonctionne très bien.

Ce message répond à vos questions: pourquoi CSS background-size: couverture ne fonctionne pas en mode portrait sur iOS?

Tous les browsers ne reconnaissent pas le mot key cover pour la taille de l'arrière-plan et, par conséquent, l'ignorent tout simplement.

Nous pouvons donc surmonter cette limitation en réglant la taille de l'arrière-plan sur 100% de largeur ou de hauteur, en fonction de l'orientation. Nous pouvons cibler l'orientation actuelle (ainsi que le périphérique iOS, en utilisant la largeur du périphérique). Avec ces deux points je pense que vous pouvez utiliser la taille de fond CSS: couvrir sur iOS en mode portrait

Voir cet article pour plus de ressources.