iframe內容不滾動在iOs5 iPad/iPhone

Question

我正在開發iPad html5網頁，需要顯示來自其他來源（不同域）的網頁。

我將這些頁面加載到iframe中，並使用iOs5新滾動功能滾動iframe，如下面的代碼所示。

<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

好的。找到了解決方案。顯然，當主文檔高度比滾動的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做了這項工作。