iOS上滚动iframe解决了，但是iframe页面显示不完整答案

【问题标题】：Scrolling iframe on iOS is solved, BUT the iframe page display incompleteiOS上滚动iframe解决了，但是iframe页面显示不完整
【发布时间】：2013-01-06 15:35:22
【问题描述】：

我正在尝试在iOS上滚动一个iframe，我成功了，它滚动得很好，参考：

http://home.jejaju.com/play/iframe-scroll.html

http://areaaperta.com/nicescroll/demo.html

但是，所有解决方案都有一个问题：iframe 页面没有完全显示...

我在我的 iphone 和 ipad 上进行了测试，iframe 页面显示不稳定。

有什么想法吗？

例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=9;FF=3;chrome=1;OtherUA=4" />
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.js"></script>
    <script type="text/javascript">
    $(function(){
        if (/iPhone|iPod|iPad/.test(navigator.userAgent))
            $('iframe').wrap(function(){
                var $this = $(this);
                return $('<div />').css({
                    width: $this.attr('width'),
                    height: $this.attr('height'),
                    overflow: 'scroll',
                    '-webkit-overflow-scrolling': 'touch'
                });
            });
    })
    </script>
    <title>Untitled</title>
</head>
<body>
stuff
<div>
<iframe src="iframe-scroll-long.html" height="500" width="500"></iframe>
</div>
more stuff
</body>
</html>

【问题讨论】：

我的代码和home.jejaju.com/play/iframe-scroll.html一样，你可以在iPad上看到这个页面，iframe页面显示断断续续，我的iOS版本是5.1.1。
好的，但是我不能查看源代码，你能把那个网页的代码贴出来吗？
当我在 itouch 上查看时，它看起来不错
嗨 Abe，我现在添加代码。 iframe 页面在第一个屏幕上看起来不错，但是当我向下滚动时，会显示不完整的页面。
我看到这里没有右大括号：$('iframe').wrap(function(){ 在function这个词之后，这可能是问题吗？

标签： html cordova iframe web-applications jquery-plugins

【解决方案1】：

这个解决方案有点老套，但在 iOS 上已经过测试并且运行良好：

<div style="width: 760px; height: 500px; overflow: scroll !important;-webkit-overflow-scrolling:touch !important;">
    <object type="text/html" data="HTTP://YOURPAGE.URL" style="width:1000px; height:10000px;">
    </object>       
</div>

基本上，由于滚动在 DIV 中可以正常工作，因此您可以使用 object 标记嵌入页面代码。问题是，由于同源策略，您无法确定目标页面的尺寸。我发现设置一个巨大的页面大小是完全可行的（没有发现延迟或波动......只是空白）

您可以轻松确定客户端操作系统，并将此代码添加到 iOS 设备。

【讨论】：

已经尝试过iscroll、iframe hacks、css 技巧……Phonegap+iFrame 组合没有任何效果，但是这个！哇。谢谢！
我们用了一段时间这个解决方案，但似乎在iOS8中停止了。 :(

【解决方案2】：

我发现 div 与“绝对”样式的组合和 nicescroll 确实修复了choppines。

您必须在 iframe 加载的页面上加载 nicescroll。在同一页面中，用 div 包装所有内容（绝对样式）

  #content {   position:absolute; }

使用包装好的 div 内容加载 nicescroll。

  $(document).ready(function() {
    $("html").niceScroll("#content"); 
  });

演示页面的链接，您可以查看代码：http://areaaperta.com/nicescroll/demo/iframe6.html

自动使用 iOS 原生滚动，在其他平台上你会激活 nicescroll。

我在装有 iOS 5.1 的 iPad 上进行了测试。

【讨论】：

谢谢 InuYaksa，它现在完美了，没有更多的choppines！谢谢！！:)
嘿 InuYaksa，您能发布您的完整解决方案吗？同样的问题一直让我发疯，但似乎我错过了一些微不足道的东西。我正在尝试在一个页面上加载两个 iframe，但遇到了滚动问题。

【解决方案3】：

尝试将-webkit-transform:translate3d(0,0,0) 添加到 iframe 样式和其中的所有元素以强制硬件加速 - 应该会减少波动。

在主页样式中：

iframe {  -webkit-transform:translate3d(0,0,0); }

在 iframe 样式中：

p { -webkit-transform:translate3d(0,0,0); }

【讨论】：

感谢 jc6212，我试过了，但波涛汹涌，没有减少。
我在 iframe 中有一个非常不稳定的动画，这个技巧解决了这个问题。我所要做的就是将它添加到动画元素中。干杯。

【解决方案4】：

我发现这是框架内相对定位的内容的问题。删除position: relative;时摆脱这种行为

【讨论】：