Spazio bianco visualizzato sul lato destro della pagina quando l'immagine di sfondo deve estendersi per l'intera lunghezza della pagina [chiuso]

Le immagini di sfondo della nostra pagina Web stanno riscontrando problemi in FireFox e Safari in iOS su iPad / iPhone con uno spazio bianco visualizzato sul lato destro della pagina.

Le immagini di sfondo si estendono bene su altri browser ma abbiamo difficoltà a non estendere l'intera lunghezza del browser su quei browser.

Dai un'occhiata al nostro sito su FireFox per vedere cosa intendo.

Ho aggiunto:

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

nel tuo CSS in alto sopra le altre classi e sembrava risolvere il tuo problema.

Il tuo file .css aggiornato è disponibile qui

Esegui il debug del tuo CSS per Ghost CSS Elements.

Usa questo segnalibro per eseguire il debug del tuo CSS: https://blog.wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/

Oppure aggiungi direttamente il CSS:

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

Nel mio caso un pulsante Mi piace di Facebook ha causato il problema.

Dopo aver esplorato alcune delle strategie utili fornite qui, ho scoperto che avevo solo bisogno di aggiungere CSS specifico per iOS (l'ho messo in fondo al mio foglio CSS principale.) Sembra che nascondere l'overflow-x fosse la risposta per me. Presumo che affermare la larghezza al 100% aiuti nel caso in cui il mio contenuto sia ampio. Va notato che ho riscontrato questo problema solo in iOS. Se è anche in Firefox, probabilmente dovrebbero essere usati solo html e body block poiché @media è specificamente rivolto ai dispositivi mobili.

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

}

Per favore, ascoltami se questo sembra sbagliato a qualcuno :)

Questa è una domanda piuttosto vecchia, ma ho pensato di aggiungere i miei 2 centesimi. Ho provato le soluzioni di cui sopra, incluso il ghost css, che salverò sicuramente per un utilizzo futuro. Ma nessuno di questi ha funzionato nella mia situazione. Ecco come ho risolto il mio problema. Si spera che questo aiuti qualcun altro.

Apri inspector (o qualunque sia la tua preferenza) e iniziando con il primo div nel tag body, aggiungi display: none;solo a quell'elemento. Se la barra di scorrimento scompare, sai che l'elemento contiene l'elemento che causa il problema. Quindi, rimuovi la prima regola CSS e scendi di un livello nell'elemento contenitore. Aggiungi il CSS a quel div e se la barra di scorrimento scompare, sai che l'elemento sta causando o contiene l'elemento offensivo. Se l'aggiunta del CSS non fa nulla, sai che non è stato quel div a causare il problema e che un altro div nel contenitore lo sta causando o il contenitore stesso lo sta causando.

Questo potrebbe richiedere troppo tempo per alcuni. Fortunatamente per me, il mio problema era nell'intestazione, ma posso immaginare che questo richiedesse un po 'di tempo se il tuo problema fosse stato detto, nel piè di pagina o qualcosa del genere.

overflow-x: hidden; funziona perfettamente per me.

Il problema è nel file:

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

rimuovere le linee:

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

Questo fondamentalmente dà un gradiente di ombra solo al piè di pagina. In Firefox, è la prima riga che causa il problema.

Ho anche avuto lo stesso problema (lo sfondo del corpo del sito Web rendeva un margine bianco destro in iPhone Safari ) e ho scoperto che l'aggiunta dell'immagine di sfondo al <html>tag ha risolto il problema.

Prima

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

Dopo

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

Apparentemente il (-o-min-device-pixel-ratio: 3/2) sta causando problemi. Sul mio sito di prova stava causando il taglio del lato destro. Ho trovato una soluzione alternativa su GitHub che per ora funziona. L'uso di (-o-min-device-pixel-ratio: ~ "3/2") sembra funzionare bene.

Vedo che alla domanda è stata data una risposta a uno standard generale, ma quando ho guardato il tuo sito ho notato che c'è ancora una barra di scorrimento orizzontale. Noto anche il motivo di ciò: hai utilizzato il codice:

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

che viene utilizzato insieme al codice che afferma che l'elemento ha una larghezza del 100%, generando un elemento con una larghezza totale del 112% delle dimensioni dello schermo. Per risolvere questo problema, rimuovere il riempimento, sostituire il riempimento con un margine del 12% per lo stesso effetto o modificare la larghezza (o larghezza massima) dell'elemento all'88%. Ciò si verifica in main.css alla riga 343. Spero che questo aiuti!

Ho avuto lo stesso problema, quindi ho provato alcune cose. Uno dei quali sembrava funzionare per me: rimuovere la larghezza e aggiungere un float al tag body.

Potrebbe non funzionare per tutte le istanze, ma nello scenario che ho avuto di recente, nascondere l'overflow sugli elementi di contenuto era impossibile ...

Ho riscontrato la linea bianca a destra anche sul mio iPad solo in posizione orizzontale. Stavo usando un div a posizione fissa con uno sfondo impostato su 960 px di larghezza e z-index di -999. Questo particolare div viene visualizzato solo su un iPad a causa di una query multimediale. Il contenuto è stato quindi inserito in un wrapper div di 960 px. Le risposte fornite in questa pagina non sono state di aiuto nel mio caso. Per risolvere il problema della striscia bianca, ho modificato la larghezza del wrapper del contenuto a 958 px. Ecco. Niente più strisce bianche bianche a destra sull'iPad in posizione orizzontale.

Questa domanda è in sospeso da un po ', ma nessuna delle soluzioni che ho trovato ha funzionato per me (avendo lo stesso problema con ipad), ma ho gestito la mia soluzione che dovrebbe funzionare per la maggior parte delle persone immagino.

Ecco il mio codice:

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

Godere!