¿Desbordamiento de iOS-x (o position absoluta) hace que el desplazamiento sea entrecortado?

Quiero que mi página web solo sea desplazable verticalmente. Así que he configurado overflow-x:hidden; a mi .page-wrapper . Mi .page-wrapper contiene dos capas posicionadas absolutas una encima de la otra. Al hacer clic en un button, la capa superior se desliza hacia un lado (como se menciona en la position:absolute; ) y hace que el website sea realmente más ancho que el 100% de la window gráfica, por lo que se puede desplazar horizontalmente.

Para evitar el desplazamiento horizontal que he configurado overflow-x:hidden a mi .page-wrapper .

Si hago eso, el desplazamiento vertical de mi contenido normal es realmente falso y no funciona correctamente.

¿Alguna idea de cómo arreglar eso?

ACTUALIZAR

-webkit-overflow-scrolling: touch; parece funcionar bien mientras no javascript está cambiando en ninguna altura. Vea el siguiente ejemplo. Lo que estoy haciendo aquí es actualizar la altura del cuerpo a la altura de los contenidos de la segunda capa, por lo que no hay un espacio de desplazamiento vacío una vez que la capa superior se desliza hacia la izquierda. Al deslizar la capa superior hacia atrás, quito el style attribte (que establece la altura) del cuerpo. Después de hacer eso, el desplazamiento vuelve a estar entrecortado.

 function showInfos(show) { if ( show ) { $('#videos').addClass('slid'); $('body').height($('#infos > .content').height()); $('#page-wrap').addClass('no-overflow'); } else if ( !show ) { $('#videos').removeClass('slid'); $('#page-wrap').removeClass('no-overflow'); $('body').removeAttr('style'); } } 

Podría intentar ajustar el width:100% en .page-wrapper y establecerlo en overflow:hidden y position:relative . Eso podría evitar el desplazamiento horizontal.

Actualizado 12/10/2012

Gracias por el ejemplo de código. Realmente me ayudó a ver tu intención y el problema con el desplazamiento más claro. Parece que necesitas -webkit-overflow-scrolling . Agregar -webkit-overflow-scrolling: touch; al page-wrapper . Aquí hay una [página de testing actualizada] con esa regla aplicada. Puede comparar con la página de testing en mi comentario a continuación para ver la diferencia.

Intente aplicarlo a cada elemento:

 * { -webkit-overflow-scrolling: touch; } 

TLDR; aplicar transform: translate3d(0px,0px,0px) al elemento y al contenedor.

En mi caso, un elemento de position absoluto o fijo se ocultó detrás de la página principal al tener un índice z más pequeño. El resultado es que cuando el contenedor se movió para revelar el elemento y luego retrocedió, en iOS hubo un retraso al tratar de desplazarse por donde estaba ese elemento. Podría desplazarme, pero tuve que apretar durante un segundo.

La solución aquí descrita funcionó para mí: https://css-tricks.com/forums/topic/mobile-safari-iphone-issue-with-position-fixed-content-running-over-the-top/

Básicamente, tanto el elemento como el envoltorio del elemento deben tener la transform: translate3d(0px,0px,0px) estilo transform: translate3d(0px,0px,0px) aplicado, luego el desplazamiento se realizó sin problemas. Para mí, sin aplicarlo tanto al elemento como al contenedor, la solución no funcionó.