Iframe Content not Rendering Under Scroll In 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); к основному обертку div выполнило эту работу.