Mobile Safari relleno blanco/margen derecho

Question

He revisado otros temas, pero parece que no puedo resolver esto. Probando este sitio aquí: http://www.mf.jlscs.com/

Cuando estoy en la vista de retrato en Mobile Safari, puedo desplazarme hacia la derecha para hacer un relleno blanco y en blanco. No quiero esto

En la vista de paisaje, este desplazamiento no está allí y se muestra como me gustaría.

No tengo idea de qué está causando este misterioso empujón. Intenté eliminar overflow-x, pero eso no funciona. Si elimino overflow-x en cada contenedor, se permite que ocurra este mismo efecto para cada contenedor en la página. ¿Algunas ideas?

Answer 1

Esto es probablemente causado por cualquiera de sus elementos estructurales que sobrepasan el ancho de su cuerpo. Busque el código que es algo así como width: 100%; padding 20px; o algo que lo haría disparar.

Sugiero poner un borde rojo en todos los divs principales y ver cuál es el culpable y se extiende hasta el borde.

Answer 2

Sugeriría descargar Web Developer for Firefox y simplemente activar Outline> Outline Block Level Elements.

Answer 3

Simplemente agregando un borde a algunos divs puede causar que el diseño cambie. Añadir esto a la parte inferior de la CSS para encontrar el elemento de pícaro:

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

También hice un bookmarklet que hace a través de Javascript por lo que fácilmente se puede utilizar en cualquier sitio. http://wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/

Answer 4

De hecho, este problema se debe a elementos "rogue" que se extienden fuera del ancho del documento por alguna razón.

Un método es utilizar el CSS anterior, no lo he intentado, pero no estoy seguro de lo fácil que sería detectar los elementos usando los bordes.

Un enfoque diferente sería la de ejecutar este JS código en la consola para encontrarlos:

Array.prototype.filter.call(document.querySelectorAll('*'), function (node) { return node.clientWidth + node.offsetLeft > document.documentElement.clientWidth });

Esto devolverá una matriz de todos los elementos whos ancho + desplazamiento (distancia desde la izquierda) son más grandes que el clientWidth.

Debería inspeccionar los elementos y descubrir por qué se comportan así - en mi caso, el pie de página tenía width:100% y , lo que provocaba que su ancho fuera 20px mayor que el ancho del documento.

Curiosamente, esto solo se vio en los iPhones, no en los androides.