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做了这项工作。