iPad deshabilita desplazamiento de documento pero no desbordamiento div desplazamiento

Question

Estoy desarrollando ventanas modales con la capacidad de ser desplazables, como las de pinterest. Cuando se disparan, defina overflow: hidden en body y overflow: auto en el contenedor de cuadro modal. Esto funciona muy bien en los navegadores de escritorio, pero mi primera prueba en iPad (y supongo que probablemente en iOS en general) revela un problema:

Cuando finaliza el desplazamiento modal, si el documento es más largo que el modal, se desplaza continúa

He intentado esto con la intención de desplazarse acepte solamente si se desencadena por el modal o su contenedor:

// Disable browser scrolling on iOS 
$(document).on('touchmove',function(e) { 
    if (($(e.target).attr('id') != id) && 
    ($(e.target).attr('id') != ('modal-'+id))) { 
     e.preventDefault(); 
    } 
}); 

y realmente funciona haciendo que estrictamente. Los desplazamientos modales y cuando termina de desplazarse por la página solo es posible si se desplaza dentro del modal.

¿Alguna idea?

probarlo en sus ipads si quieres (hay que hacer clic en el botón modal): http://www.onebigrobot.com/beta/altair/transforms-so

gracias de antemano!

Answer 1

¡Los pequeños cambios son poderosos!

Todo el problema se resuelve cambiando position: absolute por position: fixed en el contenedor modal (y también en la máscara oscura del fondo si es necesario). De hecho, con el posicionamiento absoluto, el modal solo funcionó porque el botón estaba en la parte superior de la página.

Con el posicionamiento fijo, los navegadores de escritorio funcionan perfectamente, y en el iPad ocurre algo interesante. Cuando el desplazamiento del modal finaliza, el desplazamiento de la página comienza a funcionar pero con el modo modal siempre en la parte superior bien posicionado.

Espero que esta pregunta pueda ser útil para alguien.