Contenido de iframe que no se representa en desplazamiento En iOs5 iPad/iPhone

Question

Estoy desarrollando una página web de iPad html5 que necesita mostrar páginas de otros orígenes (dominios diferentes).

Estoy cargando esas páginas en iframe, y desplazando el iframe usando la nueva capacidad de desplazamiento de iOs5, como se muestra en el siguiente código.

<div id="myDiv" style="height: 1185px; width: 100%; overflow:scroll; -webkit-overflow-scrolling: touch;"> 
    <iframe id="myIframe" src="http://http://css-tricks.com/forums/discussion/11946/scrolling-iframe-on-ipad/p1"></iframe> 
</div> 

El problema es que el contenido iframe fuera de la pantalla no se está convirtiendo en visible cuando se desplaza a la misma (el marco es en blanco).

¿Cómo puedo solucionar este problema y proporcionar una solución de desplazamiento iframe?

Answer 1

OK. encontró la solución. aparentemente, el problema aparece cuando la altura del documento principal es más corta que el iframe que se desplaza. las partes de la página de iframe que exceden la altura del documento no se representan.

Así, bajo mis necesidades, podría resolver el problema mediante la adición de un js tales (con jQuery) Código:

<script> 
$(function() { 
    var iframe = $("#myIframe");  
    iframe.load(function() { 
     $("body").height(iframe.height()); 
    }); 
}); 
</script> 

Answer 2

Si usted tiene acceso a un cuerpo de marco flotante, aplicar un poco de Transform3D a su contenido. En mi caso, agregando -webkit-transform: translate3d(0, 0, 0); al envoltorio principal, div hizo el trabajo.