Aparece un espacio en blanco en el lado derecho de la página cuando la imagen de fondo debe extenderse por toda la página [cerrado]

Las imágenes de fondo de nuestra página web tienen problemas en FireFox y Safari en iOS en iPads / iPhones con espacios en blanco que aparecen en el lado derecho de la página.

Las imágenes de fondo se extienden bien en otros navegadores, pero tenemos dificultades para no extender la longitud completa del navegador en esos navegadores.

Eche un vistazo a nuestro sitio en FireFox para ver a qué me refiero.

Yo añadí:

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

en su CSS en la parte superior por encima de las otras clases y parecía solucionar su problema.

Su archivo .css actualizado está disponible aquí

Depura tu CSS para Ghost CSS Elements.

Utilice este marcador para depurar su CSS: https://blog.wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/

O agregue el CSS directamente usted mismo:

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

En mi caso, un botón Me gusta de Facebook causó el problema.

Después de explorar algunas de las estrategias útiles proporcionadas aquí, descubrí que solo necesitaba agregar CSS específico de iOS (lo puse en la parte inferior de mi hoja css principal). Parece que ocultar el overflow-x fue la respuesta para mí. Supongo que indicar el ancho al 100% ayuda en caso de que mi contenido se amplíe. Cabe señalar que solo estaba teniendo este problema en iOS. Si también está en Firefox, probablemente solo se deberían usar el bloque html y body, ya que @media está dirigido específicamente a dispositivos móviles.

@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, dígame si esto le parece incorrecto a alguien :)

Esta es una pregunta bastante antigua, pero pensé en agregar mis 2 centavos. Probé las soluciones anteriores, incluido el css fantasma, que definitivamente guardaré para uso futuro. Pero ninguno de estos funcionó en mi situación. Así es como solucioné mi problema. Con suerte, esto ayudará a alguien más.

Abra el inspector (o lo que prefiera) y comience con el primer div en la etiqueta del cuerpo, agregue display: none;solo ese elemento. Si la barra de desplazamiento desaparece, sabrá que ese elemento contiene el elemento que está causando el problema. Luego, elimine la primera regla CSS y baje un nivel al elemento contenedor. Agregue el CSS a ese div, y si la barra de desplazamiento desaparece, sabrá que el elemento está causando o contiene el elemento ofensivo. Si agregar CSS no hace nada, sabrá que no fue ese div el que causó el problema, y ​​otro div en el contenedor lo está causando, o el propio contenedor lo está causando.

Esto puede llevar demasiado tiempo para algunos. Por suerte para mí, mi problema estaba en el encabezado, pero puedo imaginar que esto tomará un poco de tiempo si su problema fue, por ejemplo, en el pie de página o algo así.

overflow-x: hidden; funciona perfecto para mí.

El problema está en el archivo:

style.css - línea 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;
}

eliminar las líneas:

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

Esto básicamente le da un degradado de sombra solo al pie de página. En Firefox, es la primera línea la que causa el problema.

También tuve el mismo problema ( el fondo del cuerpo del sitio web muestra un margen blanco derecho en iPhone Safari ) y descubrí que agregar la imagen de fondo a la <html>etiqueta solucionó el problema.

antes de

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

Después

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

Aparentemente, la (-o-min-device-pixel-ratio: 3/2) está causando problemas. En mi sitio de prueba, estaba causando que se cortara el lado derecho. Encontré una solución alternativa en github que funciona por ahora. El uso de (-o-min-device-pixel-ratio: ~ "3/2") parece funcionar bien.

Veo que la pregunta ha sido respondida según un estándar general, pero cuando miré su sitio noté que todavía hay una barra de desplazamiento horizontal. También noto el motivo de esto: ha utilizado el código:

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

que se utiliza junto con el código que indica que el elemento tiene un ancho del 100%, lo que genera un elemento con un ancho total del 112% del tamaño de la pantalla. Para solucionar esto, elimine el relleno, reemplace el relleno con un margen del 12% para obtener el mismo efecto o cambie el ancho (o ancho máximo) del elemento al 88%. Esto ocurre en main.css en la línea 343. ¡Espero que esto ayude!

Tuve el mismo problema, así que intenté algunas cosas. Uno de los cuales pareció funcionar para mí: eliminar el ancho y agregar un flotador a la etiqueta del cuerpo.

Puede que no funcione para todas las instancias, pero en el escenario que tuve recientemente, ocultar el desbordamiento en los elementos de contenido no era posible ...

Estaba experimentando la línea blanca a la derecha en mi iPad también en posición horizontal solamente. Estaba usando un div de posición fija con un fondo establecido en 960px de ancho y un índice z de -999. Este div en particular solo aparece en un iPad debido a una consulta de medios. Luego, el contenido se colocó en una envoltura div de 960 píxeles de ancho. Las respuestas proporcionadas en esta página no ayudaron en mi caso. Para solucionar el problema de la raya blanca, cambié el ancho del contenedor de contenido a 958px. Voilá. No más franja blanca derecha blanca en el iPad en posición horizontal.

Esta pregunta ha estado rondando por un tiempo, pero ninguna de las soluciones que pude encontrar funcionó para mí (tengo el mismo problema con el ipad), pero administré mi propia solución, que debería funcionar para la mayoría de las personas que imagino.

Aquí está mi código:

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

¡Disfrutar!