Arrière-plan du corps du site Web affichant une marge blanche dans l'iPhone Safari

J'ai un rendu d'erreur dans ce site dont je n'ai pas vu nulle part ailleurs. Le site s'affiche dans tous les navigateurs modernes et valide les beaux-bien que je ne peux pas comprendre pourquoi il n'est pas de l'affichage de l'historique complet de l'image (voir les captures d'écran ci-dessous). Je suis à l'aide de Yahoo CSS Reset et l'image de fond est déclarée dans le corps comme ceci:

background: url("back.jpg") #033049;

Vous pouvez également visiter le site web: http://xaviesteve.com/

Laissez-moi savoir si je devrais fournir plus de details.
Toute aide/conseil est apprécié, merci.

MODIFIER

J'ai trouvé très peu de gens signalé ce problème autour de l'Internet:

Un autre DONC, la question: L'espace blanc montrant sur le côté droit de la page lorsque l'image d'arrière-plan devrait étendre sur toute la longueur de la page a Proposé une application overflow-x:hidden mais il recadre le site web.
Dans un iPad forum: http://www.ipadforums.net/ipad-development/9954-mobile-safari-doenst-show-background-image-when-page-slided-left.html Pas de réponses

SOLUTION

J'ai été d'enquêter et d'essayer différentes méthodes pour résoudre ce problème et trouvé que l'ajout de l'image d'arrière-plan à la <html> balise résolu le problème. Espérons que cela permet de gagner du temps à d'autres développeurs.

Avant

body {background:url('images/back.jpg');}

Après

html, body {background:url('images/back.jpg');}

source d'informationauteur Xavi Esteve

21

Déplaçant le style de l'élément html qui fonctionne bien, mais il existe d'autres moyens de fixation.

Ce qui se passe ici est d'abord l'élément de corps est de taille moyenne en fonction de la fenêtre d'affichage. Si la fenêtre est uniquement X pixels de large, votre corps ne seront X pixels de large, même si le contenu est plus large. Pour remédier à cela, donnez votre body (ou ce que vous êtes à la fixation de l'arrière-plan stylings) un non-pourcentage basé width ou un min-width pour s'adapter à votre contenu.

Vous obtenez en fait la même question sur les navigateurs de bureau, par la réduction de la fenêtre du navigateur et de défilement à droite. Le problème est plus visible sur l'iPhone/iPad parce que par défaut, le navigateur Safari Mobile sera de définir la fenêtre d'affichage à 980px, puis un zoom arrière jusqu'à ce que l'ensemble de votre contenu s'adapte à l'écran.

Une autre solution, qui je ne vous le recommande pas, car il ne fonctionne que pour le navigateur Safari Mobile est le réglage de la fenêtre d'affichage de la largeur de vous-même à l'aide de:
```
<meta name = "viewport" content = "width = 1080">
```
Plus d'info à Apple Developer Docs.

Viens de tomber sur ce problème et fixée par le réglage de tous les contenus qui utilise width:100%; d'avoir aussi min-largeur supérieure à la largeur de votre contenu divs.
Par exemple:

.content_bg{width:100%; min-width:1080px;}

J'ai aussi fixé sur des périphériques mobiles à l'aide de requêtes de média:
pour iPhone et iPad:

/*ipad portrait*/    
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      body{width:1080px;}
    }

/*ipad landscape*/    
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      body{width:1080px;}
    }

/* iPhone [portrait + landscape] */
@media only screen and (max-device-width: 480px) {
        body{width:1080px;}
    }

1

Aucune de ces solutions a résolu mon problème, mais j'ai trouvé un plutôt simple.
Il suffit de régler le background-size de votre bg conteneur équivalent à la taille de l'image, comme ceci:
```
body {
    background-image: url(bg.jpg); /* image dimensions: 1920 x 3840 */
    background-size: 1920px 3840px;
}
```
Même si cela peut sembler un peu redondant et pas presque aussi bon que de rendre votre site responsive, il fonctionne très bien.

Jeu de fond de taille à 100% et background-position en haut à gauche. Il fonctionne comme suit:

background-color: #336699;
background-image: url('whatever.jpg');
background-repeat: no-repeat;
background-position: top left;
background-attachment: fixed;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;`enter code here`

0

Je sais que c'est déjà répondu il y a quelques temps, mais aucun des bugs que j'ai pu trouver a fonctionné pour moi, mais j'ai géré ma propre solution qui devrait fonctionner pour la plupart des gens j'imagine.

Voici mon code:

html { background: url("../images/blahblah.jpg") repeat-y; min-width: 100%; background-size: contain; }

Espérons que cela aide quelqu'un!

Vous devez vous connecter pour publier un commentaire.