Содержимое iframe не отображается под прокруткой в ​​iOS5 iPad/iPhone

Я разрабатываю веб-страницу 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?

Ответы

Ответ 1

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

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

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

Ответ 2

Если у вас есть доступ к телу iFrame, примените к его содержимому некоторый transform3d, чтобы включить рендеринг с помощью графического процессора.

В моем случае добавление -webkit-transform: translate3d(0, 0, 0); к основному упаковочному тегу сделало свою работу.