Overflow-x: hidden no evita que el contenido se desborde en los navegadores móviles

Tengo un sitio web aquí .

Vista en un navegador de escritorio, la barra de menú negro se extiende solo al borde de la ventana, ya que el body tiene overflow-x:hidden .

En cualquier navegador móvil, ya sea Android o iOS, la barra de menú negra muestra su ancho completo, lo que trae espacios en blanco a la derecha de la página. Por lo que puedo decir, este espacio en blanco ni siquiera forma parte de las tags html o body .

Incluso si configuro la ventana gráfica a un ancho específico en :

  

El sitio se expande a 1100px pero aún tiene el espacio en blanco más allá de los 1100.

¿Qué me estoy perdiendo? ¿Cómo mantengo la ventana gráfica en 1100 y elimino el desbordamiento?

Crear un divisor de envoltura de sitio dentro del body y aplicar el overflow-x:hidden al envoltorio EN LUGAR del body o html resolvió el problema.

Parece que los navegadores que analizan la etiqueta simplemente ignoran los atributos de overflow en las tags html y body .

El comentario de VictorS sobre la respuesta aceptada merece ser su propia respuesta porque es una solución muy elegante que funciona, de hecho, funciona. Y agregaré un poco a su utilidad.

Victor señala la position:fixed adición position:fixed trabajos position:fixed .

 body.modal-open { overflow: hidden; position: fixed; } 

Y de hecho lo hace. Sin embargo, también tiene un ligero efecto secundario de desplazamiento esencialmente hacia la parte superior. position:absolute resuelve esto pero, vuelve a introducir la capacidad de desplazarse por el móvil.

Si conoce su ventana gráfica ( mi complemento para agregar ventana gráfica al ), puede agregar un alternar CSS para la position .

 body.modal-open { // block scroll for mobile; // causes underlying page to jump to top; // prevents scrolling on all screens overflow: hidden; position: fixed; } body.viewport-lg { // block scroll for desktop; // will not jump to top; // will not prevent scroll on mobile position: absolute; } 

También agrego esto para evitar que la página subyacente salte hacia la izquierda / derecha al mostrar / ocultar modales.

 body { // STOP MOVING AROUND! overflow-x: hidden; overflow-y: scroll !important; } 

tratar

 html, body { overflow-x:hidden } 

en lugar de simplemente

 body { overflow-x:hidden } 
 body{ height: 100%; overflow: hidden !important; width: 100%; position: fixed; 

funciona en iOS9

Como dice @Indigenuity, esto parece ser causado por navegadores que analizan la etiqueta .

Para resolver este problema en la fuente, intente lo siguiente:

.

En mis pruebas, esto evita que el usuario se aleje para ver el contenido desbordado y, como resultado, evita que se desplace / se desplace también hacia él.

Esta es la solución más simple para resolver el desplazamiento horisontal en Safari.

 html, body { position:relative; overflow-x:hidden; } 

Ninguna solución anterior me funcionó, tuve que mezclarlos y solucionó el problema también en dispositivos más antiguos (iPhone 3).

Primero, tuve que envolver el contenido html en un div externo:

   
... old html goes here ...

Luego tuve que aplicar el desbordamiento oculto a la envoltura, porque overflow-x no funcionaba:

  #wrapper { overflow: hidden; } 

y esto solucionó el problema.

Mantener intacta la ventana gráfica:

Suponiendo que desea obtener el efecto de una barra negra continua en el lado derecho: #menubar no debe exceder el 100% , ajuste el radio del borde de modo que el lado derecho quede al cuadrado y ajuste el relleno para que se extienda un poco más a el derecho. Modifique lo siguiente a su #menubar :

 border-radius: 30px 0px 0px 30px; width: 100%; /*setting to 100% would leave a little space to the right */ padding: 0px 0px 0px 10px; /*fills the little gap*/ 

Ajustando el padding a 10px por supuesto, deja el menú izquierdo al borde de la barra, puede poner los 40px restantes a cada uno de los li , 20px en cada lado a la izquierda y a la derecha:

 .menuitem { display: block; padding: 0px 20px; } 

Cuando cambie el tamaño del navegador más pequeño, encontrará todavía el fondo blanco: coloque la textura de fondo en lugar de su div en el body . O, como alternativa, ajuste el ancho del menú de navegación del 100% al valor inferior mediante consultas de medios. Se deben realizar muchos ajustes en el código para crear un diseño adecuado, no estoy seguro de qué pretende hacer, pero el código anterior arreglará de alguna manera su barra desbordante.

Agregar un wrapper

alrededor de la totalidad de tu contenido funcionará. Aunque semánticamente “asqueroso”, agregué un div con una clase de overflowWrap justo dentro de la etiqueta body y luego configuré mi CSS así:

 html, body, .overflowWrap { overflow-x: hidden; } 

¡Podría ser exagerado ahora, pero funciona como un encanto!

Me encontré con el mismo problema con dispositivos Android pero no con dispositivos iOS. Gestionado para resolver especificando la posición: relativo en el div externo de los elementos absolutamente posicionados (con desbordamiento: oculto para el div externo)

Resolví el problema usando overflow-x: hidden; como sigue

 @media screen and (max-width: 441px){ #end_screen { (NOte:-the end_screen is the wrapper div for all other div's inside it.) overflow-x: hidden; } } 

la estructura es la siguiente

1st div end_screen >> inside it >> end_screen_2(div) >> inside it >> end_screen_2.

'end_screen is the wrapper of end_screen_1 and end_screen_2 div's

Como dijo subarachnid overflow-x oculto para ambos cuerpo y html trabajado Aquí está el ejemplo de trabajo

 **HTML** 
First Strip
Second Strip
dsa
**CSS** body, html{ overflow-x:hidden; } body{ margin:0; } .contener{ width:100vw; } .baner{ background-image: url("http://sofes.miximages.com/css/abstract-art-mother-earth-1.jpg"); width:100vw; height:400px; margin-left:0; left:0; } .contener{ height:100px; } .menu{ display:flex; background-color:teal; height:100%; justify-content:flex-end; align:content:bottom; } .img1{ width:150px; height:25px; transform:rotate(45deg); background-color:red; position:absolute; top:40px; right:-50px; line-height:25px; padding:0 20px; cursor:pointer; color:white; text-align:center; transition:all 0.4s; } .img2{ width:190px; text-align:center; transform:rotate(45deg); background-color:#333; position:absolute; height:25px; line-height:25px; top:55px; right:-50px; padding:0 20px; cursor:pointer; color:white; transition:all 0.4s; } .hover{ overflow:hidden; } .hover:hover .img1{ background-color:#333; transition:all 0.4s; } .hover:hover .img2{ background-color:blue; transition:all 0.4s; }

Enlazar

Crear un divisor de envoltura de sitio dentro del cuerpo y aplicar el desbordamiento-> x: oculto al envoltorio EN LUGAR del cuerpo o html resolvió el problema.

Esto funcionó para mí después de también agregar position: relative a la envoltura.

La única forma de solucionar este problema para mi modal de arranque (que contiene un formulario) era agregar el siguiente código a mi CSS:

 .modal { -webkit-overflow-scrolling: auto!important; } 

Hace unas horas que estoy trabajando en esto, probando varias combinaciones de cosas de esta y otras páginas. Lo que funcionó para mí al final fue crear un divisor de contenido de sitio, como se sugiere en la respuesta aceptada, pero para establecer ambos desbordamientos como ocultos en lugar de solo el desbordamiento de x. Si dejo overflow-y en scroll, termino con una página que solo se desplaza verticalmente unos pocos píxeles y luego se detiene.

 #all-wrapper { overflow: hidden; } 

Esto fue suficiente, sin establecer nada en el cuerpo o elementos html.