Weißer Raum auf der rechten Seite der Seite, wenn das Hintergrundbild über die gesamte Länge der Seite reichen sollte

Question

Bei unseren Hintergrundbildern für Webseiten gibt es sowohl in FireFox als auch in Safari in iOS auf iPads/iPhones Probleme mit weißem Raum, der auf der rechten Seite der Seite erscheint.

Die Hintergrundbilder lassen sich in anderen Browsern problemlos ausdehnen, aber wir haben Probleme damit, dass sie sich in diesen Browsern nicht über die gesamte Länge des Browsers erstrecken.

Nehmen Sie eine Sehen Sie sich unsere Website auf FireFox an um zu sehen, was ich meine.

Answer 1

Ich fügte hinzu:

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

in Ihr CSS ganz oben über den anderen Klassen und es schien Ihr Problem zu beheben.

Ihre aktualisierte .css-Datei ist hier verfügbar

Answer 2

Debuggen Sie Ihr CSS für Ghost-CSS-Elemente.

Verwenden Sie dieses Lesezeichen, um Ihr CSS zu debuggen: https://blog.wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/

Oder fügen Sie das CSS direkt selbst hinzu:

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

In meinem Fall war ein Facebook Like Button die Ursache des Problems.

Answer 3

Nach der Erkundung einige der hilfreichen Strategien hier zur Verfügung gestellt, fand ich, dass ich nur iOS spezifische CSS hinzufügen musste (ich habe es am unteren Rand meiner Haupt-CSS-Blatt.) Scheint wie Ausblenden der Overflow-x war die Antwort für mich. Ich nehme an, dass die Angabe der Breite bei 100 % hilft, falls mein Inhalt breit wird. Es sollte angemerkt werden, dass ich dieses Problem nur in iOS hatte. Wenn es auch in Firefox auftritt, sollte wahrscheinlich nur der html- und body-Block verwendet werden, da @media speziell auf mobile Geräte ausgerichtet ist.

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

}

Bitte hippen Sie mich, wenn dies jemandem falsch erscheint :)

Answer 4

Diese Frage ist schon ziemlich alt, aber ich dachte, ich füge meine 2 Cent hinzu. Ich habe versucht, die oben genannten Lösungen, einschließlich der Geist css, die ich auf jeden Fall für die zukünftige Verwendung zu speichern. Aber keine dieser Lösungen hat in meiner Situation funktioniert. Hier ist, wie ich mein Problem behoben. Hoffentlich hilft das jemand anderem.

Öffnen Sie den Inspektor (oder was auch immer Sie bevorzugen) und beginnen Sie mit dem ersten div im body-Tag und fügen Sie hinzu display: none; auf genau dieses Element. Wenn die Bildlaufleiste verschwindet, wissen Sie, dass dieses Element das Element enthält, das das Problem verursacht. Entfernen Sie dann die erste Css-Regel und gehen Sie eine Ebene tiefer in das enthaltende Element. Wenn die Bildlaufleiste dann verschwindet, wissen Sie, dass dieses Element entweder das Problem verursacht oder es enthält. Wenn das Hinzufügen des CSS nichts bewirkt, wissen Sie, dass das Problem nicht von diesem div verursacht wurde und dass entweder ein anderes div im Container oder der Container selbst die Ursache ist.

Dies mag für einige zu zeitaufwendig sein. Zum Glück befand sich mein Problem in der Kopfzeile, aber ich kann mir vorstellen, dass es etwas länger dauern würde, wenn das Problem in der Fußzeile oder ähnlichem läge.

Answer 5

overflow-x: hidden; funktioniert für mich perfekt.