Treści iframe nie renderowane pod przewijaniem w iOs5 iPad/iPhone

Question

Zajmuję się tworzeniem strony internetowej na iPada html5, która musi wyświetlać strony z innych źródeł (różne domeny).

Ładowanie tych stron do iframe i przewijanie iframe przy użyciu nowej funkcji przewijania iOs5, jak pokazano w poniższym kodzie.

<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> 

Problemem jest to, że zawartość iframe pozaekranowy nie staje się widoczny podczas przewijania do niego (ramka jest pusta).

Jak mogę rozwiązać ten problem i zapewnić przewijane rozwiązanie iframe?

Answer 1

OK. znalazłem rozwiązanie. wygląda na to, że problem pojawia się, gdy wysokość dokumentu głównego jest krótsza niż przewinięta iframe. Części strony iframe, które przekraczają wysokość dokumentu, nie są renderowane.

Tak, pod moje potrzeby, mogę rozwiązać ten problem poprzez dodanie takiej js (jQuery) kodu:

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

Answer 2

Jeśli masz dostęp do iFrame ciała, stosować pewne transform3d do jego treści. W moim przypadku dodanie -webkit-transform: translate3d(0, 0, 0); do div głównego pakowania wykonało zadanie.