Espaço em branco aparecendo no lado direito da página quando a imagem de fundo deve se estender por toda a extensão da página [fechada]

Nossas imagens de plano de fundo da página da web estão tendo problemas no FireFox, bem como no Safari no iOS em iPads / iPhones, com espaço em branco aparecendo no lado direito da página.

As imagens de fundo estendem-se perfeitamente em outros navegadores, mas estamos tendo dificuldade em não estender o comprimento total do navegador nesses navegadores.

Dê uma olhada em nosso site no FireFox para ver o que quero dizer.

Eu adicionei:

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

em seu CSS no topo acima das outras classes e pareceu resolver o seu problema.

Seu arquivo .css atualizado está disponível aqui

Depure seu CSS para os elementos CSS do Ghost.

Use este favorito para depurar seu CSS: https://blog.wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/

Ou adicione o CSS diretamente:

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

No meu caso, um botão de curtir do Facebook causou o problema.

Depois de explorar algumas das estratégias úteis fornecidas aqui, descobri que só precisava adicionar CSS específico do iOS (coloquei no final da minha folha de css principal). Parece que ocultar o overflow-x foi a resposta para mim. Presumo que declarar a largura em 100% ajuda no caso de meu conteúdo ser extenso. Deve-se observar que eu estava tendo esse problema apenas no iOS. Se também for no Firefox, apenas o html e o bloco de corpo provavelmente devem ser usados, pois a @mídia tem como alvo específico dispositivos móveis.

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

}

Por favor, descubra se isso parece incorreto para alguém :)

Esta é uma pergunta muito antiga, mas pensei em adicionar meus 2 centavos. Eu tentei as soluções acima, incluindo o css fantasma, que definitivamente irei salvar para uso futuro. Mas nada disso funcionou na minha situação. Veja como resolvi meu problema. Espero que isso ajude outra pessoa.

Abra o inspetor (ou qualquer que seja sua preferência) e, começando com a primeira div na tag body, adicione display: none;apenas a esse elemento. Se a barra de rolagem desaparecer, você saberá que esse elemento contém o elemento que está causando o problema. Em seguida, remova a primeira regra css e desça um nível até o elemento que o contém. Adicione o css a esse div e, se a barra de rolagem desaparecer, você saberá que o elemento está causando ou contendo o elemento ofensivo. Se adicionar o CSS não fizer nada, você sabe que não foi esse div que causou o problema, e ou outro div no contêiner está causando isso, ou o próprio contêiner está causando isso.

Isso pode consumir muito tempo para alguns. Para minha sorte, meu problema estava no cabeçalho, mas posso imaginar isso demorando um pouco se o seu problema estivesse no rodapé ou algo assim.

overflow-x: hidden; funciona perfeito para mim.

O problema está no arquivo:

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

remova as linhas:

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

Isso basicamente fornece um gradiente de sombra apenas para o rodapé. No Firefox, é a primeira linha que está causando o problema.

Também tive o mesmo problema (o fundo do corpo do site renderizando uma margem branca direita no iPhone Safari ) e descobri que adicionar a imagem de fundo à <html>tag corrigiu o problema.

Antes

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

Depois de

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

Aparentemente, a (proporção -o-min-device-pixel-ratio: 3/2) está causando problemas. No meu site de teste, isso estava causando o corte do lado direito. Eu encontrei uma solução alternativa no github que funciona por enquanto. Usando (proporção -o-min-dispositivo-pixel: ~ "3/2") parece funcionar bem.

Vejo que a pergunta foi respondida de acordo com um padrão geral, mas quando olhei em seu site percebi que ainda há uma barra de rolagem horizontal. Também percebi o motivo para isso: Você usou o código:

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

que está sendo usado ao lado do código informando que o elemento tem uma largura de 100%, fazendo com que um elemento com uma largura total de 112% do tamanho da tela. Para corrigir isso, remova o preenchimento, substitua o preenchimento com uma margem de 12% para o mesmo efeito ou altere a largura (ou largura máxima) do elemento para 88%. Isso ocorre em main.css na linha 343. Espero que ajude!

Eu tive o mesmo problema, então tentei algumas coisas. Um dos quais pareceu funcionar para mim - remover a largura e adicionar um flutuador à tag do corpo.

Pode não funcionar para todas as instâncias, mas no cenário que tive recentemente, ocultar o estouro de elementos de conteúdo era impossível ...

Eu estava percebendo a linha branca à direita no meu iPad apenas na posição horizontal. Eu estava usando um div de posição fixa com um plano de fundo definido para 960 px de largura e índice z de -999. Este div específico só aparece em um iPad devido a uma consulta à mídia. O conteúdo foi então colocado em um invólucro div de 960 pixels de largura. As respostas fornecidas nesta página não ajudaram no meu caso. Para corrigir o problema da listra branca, alterei a largura do wrapper de conteúdo para 958 px. Voilá. Não há mais faixa branca direita branca no iPad na posição horizontal.

Esta questão está pairando por um tempo, mas nenhuma das correções que encontrei funcionou para mim (tendo o mesmo problema com o ipad), mas consegui minha própria solução que deve funcionar para a maioria das pessoas que imagino.

Este é meu código:

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

Aproveitar!