Overflow-x: oculto; no funciona en dispositivos Android

He llegado a la conclusión de que se trata de un problema solo para Android, debido a la forma en que funciona mi menú de navegación, y me estoy quedando sin ideas para probar. El menú se empuja al 100% desde la izquierda para ocultar el menú. Estoy usando transiciones CSS para que el menú se deslice desde el lado derecho al 80% de la ventana. Una vez que se alterna el menú, deja un espacio abierto y vacío en el lado derecho donde se esconde el menú. No puedo usar display: none; ya que matará la animación. Importante El problema solo ocurre una vez que se alterna el menú.

Yo he tratado:

  • SO Q1

  • SO Q2

  • SO Q3

  • SO Q4

  • desbordamiento en el cuerpo, html, wrapper, .searchCont y más.

Actualización 2/6/2014

Aquí está el menú de navegación css:

ul.subNav { position: absolute; top: 70px; left: 100%; transition: all 0.6s ease; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -ms-transition: all 0.6s ease; visibility: hidden; width: 80%; background: #f7f7f7; border-left: 5px solid #00529f; z-index: 100; } 

Fin de actualización

Aquí está el css:

 .wrapper { max-width: 100%; height: 100%; background: #20aad7; background: url("../images/bg.png"), -moz-linear-gradient(-45deg, #20aad7 0%, #54709f 31%, #64b491 65%, #047074 100%); background: url("../images/bg.png"), -webkit-gradient(linear, left top, right bottom, color-stop(0%,#20aad7), color-stop(31%,#54709f), color-stop(65%,#64b491), color-stop(100%,#047074)); background: url("../images/bg.png"), -webkit-linear-gradient(-45deg, #20aad7 0%,#54709f 31%,#64b491 65%,#047074 100%); background: url("../images/bg.png"), -o-linear-gradient(-45deg, #20aad7 0%,#54709f 31%,#64b491 65%,#047074 100%); background: url("../images/bg.png"), -ms-linear-gradient(-45deg, #20aad7 0%,#54709f 31%,#64b491 65%,#047074 100%); background: url("../images/bg.png"), linear-gradient(135deg, #20aad7 0%,#54709f 31%,#64b491 65%,#047074 100%); background-repeat: repeat; overflow-x: hidden; } 

Finalmente, aquí hay un violín / sitio en vivo: Demo-fiddle / Demo-live-site


Aquí hay una imagen de cómo se ve el problema:

problema con el desbordamiento

Hemos estado luchando con el mismo problema con mi amigo (resulta ser, @ user3310612 :)) trabajando durante los últimos días. Absolutamente no podía entender por qué CUALQUIER forma de mover el menú hacia la derecha (especialmente la transformación, que no debería afectar el diseño) hacía que la página se desplazara hacia la derecha en Android.

Hoy, después de ver las publicaciones que se overflow-x no funciona en Android, simplemente pregunté al azar “¿Qué sucede si usa el overflow:hidden . Expectativas – recorta el menú derecho, pero probablemente también la página comprimida y el desplazamiento desglosado / arriba. – funciona sin problemas .

Entonces, para nosotros, overflow:hidden en el #container superior resolvió el problema. Hace 20 minutos 🙂

Se encontró con el mismo problema, al aplicar un overflow-x: oculto al html y el cuerpo no hizo nada en Android. Coloque un contenedor div dentro de su cuerpo y haga que todo quede en la página. Agregue un overflow-x: oculto a ese contenedor div y el problema está resuelto.

Encontré una opción que funciona por ahora. (Dejará sin marcar para obtener mejores respuestas)

Terminé haciendo la posición del menú y el icono de navegación position: fixed; ya que quería que el menú se arreglara en el mismo lugar si el usuario se desplaza por la página para evitar un menú de aspecto incómodo.

Esto solucionó mi problema solo debido a la position: fixed; ya que saca todo el elemento del flujo de trabajo como si no estuviera allí. Entonces el cuerpo no está percibiendo que un elemento está allí, por lo que ya no puede desplazarse hacia el lado derecho.

 ul.subNav { position: fixed; top: 0; left: 100%; transition: all 0.6s ease; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -ms-transition: all 0.6s ease; visibility: hidden; width: 80%; height: 100%; background: #f7f7f7; border-left: 5px solid #00529f; z-index: 100; } ul.subNav.active { left: 20%; visibility: visible; } 

Necesitas

 #wrapper {position:absolute;} 

Supongo que su “problema” proviene de la visibility: hidden/ visible .

Como dice la especificación : “oculto: el cuadro generado es invisible (totalmente transparente, no se dibuja nada), pero aún afecta el diseño”.

Intenta usar

 display: none|block; 

en lugar.

O puede evitar todo si presiona el menú fuera de la pantalla hacia la izquierda (en lugar de hacia la derecha).

Por cierto: el enlace a su sitio en vivo no funciona y hay algunos errores en su marcado HTML en el JSFiddle (por ejemplo, las tags de cierre ) y también su CSS tiene espacio para la optimización. 😉

Intenta reemplazar

 overflow-x: hidden; 

con overflow: hidden;

Tuve el mismo problema y funcionó para mí.

Tuve el mismo problema y como que fusioné algunas de las respuestas aquí juntas, ¡gracias a todos por su aporte! Esto es lo que hice:

 body{ overflow-x:hidden; } .menu{ position: fixed; z-index: 1; width: 340px; max-width: 85%; top: 0px; right: -340px; } .menu.open{ right:0; position:absolute; } 

position:fixed; configuración position:fixed; parecía hacer el truco, así que cuando quería abrir el menú (y en mi caso una posición fixed no era deseable) lo configuré en absolute . También podría, como se mencionó, alternar la visibility o incluso configurar la display:none . Esto solo se probó en Chrome para Android.

Tuve el mismo problema en Android cuando trabajaba en un proyecto iónico. Lo que hice para resolver el problema es poner {overflow-x:hidden} en los elementos secundarios.