Содержимое 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 решение?

15
iframe ios ipad iphone scroll

2 ответов

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

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

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

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

3