Un espace blanc apparaît sur le côté droit de la page lorsque l'image d'arrière-plan doit s'étendre sur toute la longueur de la page [fermé]

Les images d'arrière-plan de notre page Web rencontrent des problèmes dans FireFox ainsi que Safari dans iOS sur iPad / iPhone avec un espace blanc sur le côté droit de la page.

Les images d'arrière-plan s'étendent bien sur d'autres navigateurs, mais nous avons du mal à ne pas étendre toute la longueur du navigateur sur ces navigateurs.

Jetez un œil à notre site sur FireFox pour voir ce que je veux dire.

J'ai ajouté:

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

dans votre CSS tout en haut au-dessus des autres classes et cela a semblé résoudre votre problème.

Votre fichier .css mis à jour est disponible ici

Déboguez votre CSS pour les éléments CSS Ghost.

Utilisez ce signet pour déboguer votre CSS: https://blog.wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/

Ou ajoutez le CSS directement vous-même:

* {
  background: #000 !important;
  color: #0f0 !important;
  outline: solid #f00 1px !important;
}

Dans mon cas, un bouton J'aime Facebook a causé le problème.

Après avoir exploré certaines des stratégies utiles fournies ici, j'ai trouvé que je n'avais besoin que d'ajouter du CSS spécifique à iOS (je l'ai mis au bas de ma feuille css principale.) On dirait que cacher le overflow-x était la réponse pour moi. Je suppose qu'indiquer la largeur à 100% aide dans le cas où mon contenu est large. Il convient de noter que je n'avais ce problème que sous iOS. Si c'est également dans Firefox, seuls les blocs html et body devraient probablement être utilisés car @media cible spécifiquement les appareils mobiles.

@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){

  html,
  body{
    width:100%;
    overflow-x:hidden;
  }

}

S'il vous plaît, hanchez-moi si cela semble incorrect à quelqu'un :)

C'est une question assez ancienne, mais je pensais ajouter mes 2 cents. J'ai essayé les solutions ci-dessus, y compris le ghost css, que je conserverai certainement pour une utilisation future. Mais aucun de ceux-ci n'a fonctionné dans ma situation. Voici comment j'ai résolu mon problème. J'espère que cela aidera quelqu'un d'autre.

Ouvrez l'inspecteur (ou quelle que soit votre préférence) et en commençant par le premier div dans la balise body, ajoutez display: none;uniquement à cet élément. Si la barre de défilement disparaît, vous savez que cet élément contient l'élément à l'origine du problème. Ensuite, supprimez la première règle css et descendez d'un niveau dans l'élément contenant. Ajoutez le css à ce div et si la barre de défilement disparaît, vous savez que l'élément est soit à l'origine, soit contient l'élément incriminé. Si l'ajout du CSS ne fait rien, vous savez que ce n'est pas ce div qui a causé le problème, et soit un autre div dans le conteneur le cause, soit le conteneur lui-même en est la cause.

Cela peut prendre trop de temps pour certains. Heureusement pour moi, mon problème était dans l'en-tête, mais je peux imaginer que cela prend un peu de temps si votre problème était, par exemple, dans le pied de page ou quelque chose comme ça.

overflow-x: hidden; fonctionne parfaitement pour moi.

Le problème est dans le fichier:

style.css - ligne 721

#sub_footer {
    background: url("../images/exterior/sub_footer.png") repeat-x;
    background: -moz-linear-gradient(0% 100% 90deg,#102c40, #091925);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#091925), to(#102c40));
    -moz-box-shadow: 3px 3px 4px #999999;
    -webkit-box-shadow: 3px 3px 4px #999999;
    box-shadow: 3px 3px 4px #999999;
    padding-top:10px;
    font-size:9px;
    min-height:40px;
}

supprimer les lignes:

-moz-box-shadow: 3px 3px 4px #999999;
-webkit-box-shadow: 3px 3px 4px #999999;
box-shadow: 3px 3px 4px #999999; 

Cela donne essentiellement un dégradé d'ombre uniquement au pied de page. Dans Firefox, c'est la première ligne qui pose le problème.

J'ai également eu le même problème (l' arrière-plan du corps du site Web rendant une marge blanche droite dans iPhone Safari ) et j'ai constaté que l'ajout de l'image d'arrière-plan à la <html>balise résolvait le problème.

Avant

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

Après

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

Apparemment, le (-o-min-device-pixel-ratio: 3/2) pose des problèmes. Sur mon site de test, cela provoquait la coupure du côté droit. J'ai trouvé une solution de contournement sur github qui fonctionne pour le moment. L'utilisation de (-o-min-device-pixel-ratio: ~ "3/2") semble fonctionner correctement.

Je vois que la question a été répondue à une norme générale, mais quand j'ai regardé votre site, j'ai remarqué qu'il y avait toujours une barre de défilement horizontale. J'en remarque également la raison: vous avez utilisé le code:

.homepageconference .container {
padding-left: 12%;
}

qui est utilisé à côté du code indiquant que l'élément a une largeur de 100%, ce qui entraîne un élément d'une largeur totale de 112% de la taille de l'écran. Pour résoudre ce problème, supprimez le remplissage, remplacez-le par une marge de 12% pour le même effet ou modifiez la largeur (ou largeur maximale) de l'élément à 88%. Cela se produit dans main.css à la ligne 343. J'espère que cela vous aidera!

J'ai eu le même problème, alors j'ai essayé plusieurs choses. L'un d'entre eux a semblé fonctionner pour moi - supprimer la largeur et ajouter un flotteur à l'étiquette corporelle.

Peut ne pas fonctionner pour toutes les instances, mais dans le scénario que j'ai récemment eu, masquer le débordement sur les éléments de contenu était impossible ...

Je rencontrais la ligne blanche à droite sur mon iPad également en position horizontale uniquement. J'utilisais un div à position fixe avec un arrière-plan de 960 px de large et un z-index de -999. Cette div particulière n'apparaît que sur un iPad en raison d'une requête multimédia. Le contenu a ensuite été placé dans un emballage div de 960 pixels de large. Les réponses fournies sur cette page n'ont pas aidé dans mon cas. Pour résoudre le problème de la bande blanche, j'ai changé la largeur du wrapper de contenu à 958px. Voilá. Fini la bande blanche droite blanche sur l'iPad en position horizontale.

Cette question traîne depuis un certain temps, mais aucun des correctifs que j'ai pu trouver n'a fonctionné pour moi (ayant le même problème avec ipad), mais j'ai géré ma propre solution qui devrait fonctionner pour la plupart des gens que j'imagine.

Voici mon code:

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

Prendre plaisir!