Контент iframe не воспроизводится при прокрутке в iOs5 iPad / iPhone

Question

Я занимаюсь разработкой веб-страницы iPad html5, которая должна отображать страницы из других источников (разных доменов).

Я загружаю эти страницы в iframe и прокручиваю iframe, используя новую возможность прокрутки iOs5, как показано в коде ниже.

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

Проблема заключается в том, что закадровое содержимое iframe не становится видимым при прокрутке к нему (рамка пуста).

Как я могу преодолеть эту проблему и предоставить прокручиваемое iframe решение?

Answer 1

OK. нашел решение. очевидно, проблема возникает, когда высота основного документа короче, чем прокручиваемая iframe. части страницы iframe, которые превышают высоту документа, не отображаются.

Итак, под свои нужды я мог бы решить проблему, добавив такой код js (с jquery):

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

Answer 2

Если у вас есть доступ к телу iFrame, примените к его содержимому некоторый transform3d. В моем случае добавление -webkit-transform: translate3d(0, 0, 0); к основному упаковочному тегу сделало эту работу.