Auf der rechten Seite wird ein weißer Bereich angezeigt, wenn sich das Hintergrundbild über die gesamte Länge der Seite erstrecken soll [geschlossen]

Unsere Webseiten-Hintergrundbilder haben Probleme in FireFox sowie in Safari in iOS auf iPads / iPhones. Auf der rechten Seite wird ein Leerzeichen angezeigt.

Die Hintergrundbilder funktionieren in anderen Browsern einwandfrei, aber wir haben Schwierigkeiten, in diesen Browsern nicht die gesamte Länge des Browsers zu erweitern.

Schauen Sie sich unsere Website auf FireFox an, um zu sehen, was ich meine.

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 finden Sie hier

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 hat ein Facebook Like Button das Problem verursacht.

Nachdem ich einige der hier bereitgestellten hilfreichen Strategien untersucht hatte, stellte ich fest, dass ich nur iOS-spezifisches CSS hinzufügen musste (ich habe es am Ende meines Haupt-CSS-Blattes eingefügt). Es scheint, als wäre das Ausblenden des Überlaufs-x die Antwort für mich. Ich gehe davon aus, dass die Angabe der Breite bei 100% für den Fall hilfreich ist, dass mein Inhalt breit wird. Es sollte beachtet werden, dass ich dieses Problem nur in iOS hatte. Wenn es auch in Firefox enthalten ist, sollten wahrscheinlich nur 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 hippe mich, wenn das jemandem falsch erscheint :)

Dies ist eine ziemlich alte Frage, aber ich dachte, ich würde meine 2 Cent hinzufügen. Ich habe die oben genannten Lösungen ausprobiert, einschließlich der Ghost-CSS, die ich definitiv für die zukünftige Verwendung speichern werde. Aber keines davon hat in meiner Situation funktioniert. So habe ich mein Problem behoben. Hoffentlich hilft das jemand anderem.

Öffnen Sie den Inspektor (oder was auch immer Sie bevorzugen) und fügen Sie hinzu, beginnend mit dem ersten div in body-Tag display: none; genau diesem Element hinzu. Wenn die Bildlaufleiste verschwindet, wissen Sie, dass das 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. Fügen Sie das CSS zu diesem Div hinzu, und wenn die Bildlaufleiste nicht mehr angezeigt wird, wissen Sie, dass das Element das fehlerhafte Element verursacht oder enthält. Wenn das Hinzufügen des CSS nichts bewirkt, wissen Sie, dass es nicht das Div war, das das Problem verursacht hat, und entweder ein anderes Div im Container verursacht es oder der Container selbst verursacht es.

Dies kann für einige zu zeitaufwändig sein. Zum Glück war mein Problem in der Kopfzeile, aber ich kann mir vorstellen, dass dies etwas Zeit in Anspruch nimmt, wenn Ihr Problem in der Fußzeile oder so etwas steht.

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

Das Problem liegt in der Datei:

style.css - Zeile 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;
}

Entfernen Sie die Zeilen:

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

Dies gibt im Grunde nur der Fußzeile einen Schattenverlauf. In Firefox ist es die erste Zeile, die das Problem verursacht.

Ich hatte auch das gleiche Problem ( Hintergrund des Website-Körpers, der in iPhone Safari einen rechten weißen Rand darstellt ) und festgestellt, dass <html>das Problem durch Hinzufügen des Hintergrundbilds zum Tag behoben wurde.

Vor

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

Nach dem

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

Anscheinend verursacht das (-o-min-Geräte-Pixel-Verhältnis: 3/2) Probleme. Auf meiner Teststelle wurde die rechte Seite abgeschnitten. Ich habe eine Problemumgehung für Github gefunden , die vorerst funktioniert. Die Verwendung von (-o-min-Geräte-Pixel-Verhältnis: ~ "3/2") scheint gut zu funktionieren.

Ich sehe, dass die Frage nach einem allgemeinen Standard beantwortet wurde, aber als ich mir Ihre Site ansah, bemerkte ich, dass es immer noch eine horizontale Bildlaufleiste gibt. Ich bemerke auch den Grund dafür: Sie haben den Code verwendet:

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

Dies wird zusammen mit dem Code verwendet, der angibt, dass das Element eine Breite von 100% hat, was zu einem Element mit einer Gesamtbreite von 112% der Bildschirmgröße führt. Um dies zu beheben, entfernen Sie entweder die Polsterung, ersetzen Sie die Polsterung durch einen Rand von 12%, um den gleichen Effekt zu erzielen, oder ändern Sie die Breite (oder maximale Breite) des Elements auf 88%. Dies geschieht in main.css in Zeile 343. Hoffe das hilft!

Ich hatte das gleiche Problem, also habe ich ein paar Dinge ausprobiert. Eines davon schien für mich zu funktionieren - das Entfernen der Breite und das Hinzufügen eines Schwimmers zum Body-Tag.

Funktioniert möglicherweise nicht für alle Instanzen, aber in dem Szenario, das ich kürzlich hatte, war es kein Problem, den Überlauf von Inhaltselementen zu verbergen ...

Ich habe die weiße Linie rechts auf meinem iPad auch nur in horizontaler Position festgestellt. Ich habe ein Div mit fester Position mit einem Hintergrund von 960 Pixel Breite und einem Z-Index von -999 verwendet. Diese bestimmte Div wird aufgrund einer Medienabfrage nur auf einem iPad angezeigt. Der Inhalt wurde dann in einen 960 Pixel breiten Div-Wrapper gelegt. Die Antworten auf dieser Seite haben in meinem Fall nicht geholfen. Um das Problem mit den weißen Streifen zu beheben, habe ich die Breite des Inhalts-Wrappers auf 958px geändert. Voilá. Kein weißer rechter weißer Streifen mehr auf dem iPad in horizontaler Position.

Diese Frage hat sich schon eine Weile herumgesprochen, aber keine der Korrekturen, die ich finden konnte, hat für mich funktioniert (mit dem gleichen Problem mit dem iPad), aber ich habe meine eigene Lösung verwaltet, die für die meisten Leute funktionieren sollte, die ich mir vorstelle.

Hier ist mein Code:

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

Genießen!