web-dev-qa-db-fra.com

taille de l'arrière-plan: la couverture ne fonctionne pas sur iOS

Voici 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 Android mobile:

working

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

too big

ioscssbackground-image
37
Hoàn Nguyễn

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

Comme @ RyanKimber l'a souligné , les images attachées fixes utilisent l'ensemble <body> Taille. Sur mobile, cela peut devenir très grand, ce qui fait exploser votre image. La définition de la pièce jointe sur scroll permet à votre image de couverture de s'étirer dans son propre conteneur.

56
Matt Fiocca

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

Si vous souhaitez conserver un cover de taille fixed arrière-plan sur tous les appareils, y compris iOS, sans ajouter de nouveau nœud, l'astuce consiste à faire le correctif positionnement sur l'élément (corps) lui-même et non sur l'arrière-plan, car un arrière-plan et une taille de couverture fixes gâchent iOS.

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

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

body {
      background: url(https://www.w3schools.com/css/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 fixe et pas l'arrière-plan :

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(https://www.w3schools.com/css/trolltunga.jpg) center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

J'aurais pu utiliser le corps lui-même, avec "position: fixed; overflow-y: scroll", mais je ne voulais pas jouer avec le positionnement du corps et de ma disposition générale.

Donc, faire cela sur le corps : après est une solution très facile. J'ai testé la solution sur Mac et iOS avec Firefox, Safari, Chrome.

J'ai également créé un dépôt github avec 2 exemples pour cela: https://github.com/thesved/fixed-cover-background

49
Viktor Camp

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

Notre solution a été 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.

Étant donné que ce div est maintenant la taille de la fenêtre, background-size: cover fonctionne très bien.

5
Ryan Kimber

Ce message répond à vos questions: pourquoi la taille d'arrière-plan CSS: la couverture ne fonctionne-t-elle pas en mode portrait sur iOS?

Tous les navigateurs ne reconnaissent pas le mot-clé cover pour la taille d'arrière-plan et, par conséquent, l'ignorent simplement.

Nous pouvons donc surmonter cette limitation en définissant la taille de l'arrière-plan à 100% de largeur ou de hauteur, selon l'orientation. Nous pouvons cibler l'orientation actuelle (ainsi que l'appareil iOS, en utilisant la largeur de l'appareil). Avec ces deux points, je pense que vous pouvez utiliser la taille d'arrière-plan CSS: couvrir sur iOS en mode portrait

Voir cet article pour plus de ressources.

0
FranCarstens