Chrome 错误：向上滚动时屏幕上的 iframe 渲染线答案

【问题标题】：Chrome bug: iframe rendering lines on screen when scrolling upChrome 错误：向上滚动时屏幕上的 iframe 渲染线
【发布时间】：2012-08-18 18:37:26
【问题描述】：

此处的错误：https://groups.google.com/a/chromium.org/forum/?fromgroups#!topic/chromium-bugs/eUfzp3UJDwo%5B1-25%5D

刚刚遇到这个问题，在 chrome 上显示我的屏幕，但在 firefox 或 IE 上没有。有人在 Mac 上看到过这个吗？

【问题讨论】：

是的，我也在 OS X 中看到过。

标签： google-chrome iframe

【解决方案1】：

删除background-color:

body {
...
background-color: #fff; 
}

在呈现为 iFrame 的 HTML 文档的 CSS 中确实解决了我的问题。

【讨论】：

【解决方案2】：

在尝试解决此错误一整天后，我可以确认还有另一种解决方法，它可能是一个“更容易”的解决方法。

在我的情况下，这些解决方案不起作用。事实上，将它们应用于 chrome 问题跟踪器中的示例（在此处查找它们 http://code.google.com/p/chromium/issues/detail?id=143354 ）实际上并没有解决问题. （PS：问题通常是基于使用滚动条和有时在使用鼠标滚动）。

因此，我对有效的服务进行了一些搜索并猜测是什么：
视觉网站优化器没有这个问题
他们确实在使用 iframe，干得好！

那么，他们使用了什么解决方案？
他们使用固定的高度。（是的！）

那么，以 chrome 问题 143354 中的示例（红色背景的那个，好吗？）并从

更改代码

<html>
<body style="background-color:red">
<p>This is outside the iframe</p>
<iframe width="80%" height="50%" frameborder="0" src="./page2.html"></iframe>
</body>
</html>

到

<html>
<body style="background-color:red">
<p>This is outside the iframe</p>
<iframe width="80%" height="50%"  src="./page2.html" style="margin: 0px !important; padding: 0px !important; height: 286px; "></iframe>
</body>
</html>

这样就解决了红线问题。

为了修复我的 web 应用程序，我需要计算每次调整窗口大小时的高度，放置这些边距/填充，并避免在 iframe 上进行相对定位，仅此而已。

希望它有所帮助（它几乎让我想办法解决它）

【讨论】：

碰巧如果 iframe 的父级具有固定的高度，即使 iframe 的高度固定，线条仍然存在。我通过使 iframe 的高度比父 div 的高度小 1px 解决了这个问题。

【解决方案3】：

在使用 Windows 7 和 chrome 22.0.1229.94 时仍然存在同样的问题，除了向下滚动时出现白线，而不是向上滚动。我已经尝试了所有提出的解决方案，但似乎没有任何解决方案。设置 -webkit-margin-after 和 -webkit-margin-before 使线条在向下滚动时消失，但现在它在向上滚动时出现。在 chrome group 论坛上，他们说它应该在 23 系列中修复，但谁知道...

最后，可以找到一些受阅读启发的解决方法（不是很酷但很有效）。

这里是：

$(document).ready(function(){
                //to fix scrolling bug in iframe for chrome (issue: http://code.google.com/p/chromium/issues/detail?id=140447)
                if(/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) {
                    var ibody = document.getElementsByTagName('body')[0];           
                    window.onscroll = function(e) { 
                        ibody.style.visibility='hidden';
                        ibody.offsetHeight; 
                        ibody.style.visibility='visible';
                    }
                }
});

【讨论】：

我尝试了这里的大部分建议，这是唯一为我解决问题的建议！
另外，让我大吃一惊的是ibody.offsetHeight; 是这个工作所必需的。你甚至不能用别的东西代替那行！

【解决方案4】：

有同样的问题。通过将 position 样式设置为 relative 解决：

<iframe ... style="position: relative"></iframe>

【讨论】：

肯定有很多条件会影响这个错误。有些解决方案适用于某些解决方案，但不适用于其他解决方案。我不确定这是否适用于所有配置（标记、css、chrome 版本等），但它确实适用于我的配置。谢谢！

【解决方案5】：

已确认导致这些视觉异常的问题已在最新的金丝雀版本的 chrome (>= 25.0.1365.1 金丝雀) 中得到修复，因此希望 chrome 稳定频道很快就会得到修复。

【讨论】：

【解决方案6】：

我发现可以通过稍微调整 DOM 来解决这个 Chrome 错误。

例如这是导致问题的原因：

  <h1>foobar</h1>
  <iframe src="..." style="border:none"></iframe>

...但是用 SPAN 替换 H1 修复了它：

  <span style="display:block">foobar</span>
  <iframe src="..." style="border:none"></iframe>

【讨论】：

【解决方案7】：

我遇到了类似的问题，我可以通过将 -webkit-margin-after 和 -webkit-margin-before 设置为 0 来解决它。

<h1 style="-webkit-margin-after:0; -webkit-margin-before:0;">foobar</h1>
<iframe src="..."></iframe>

此外，我最初尝试将 H1 替换为 Jiri 示例中的跨度，但当我尝试将 0.2em 的顶部和底部边距应用于跨度时，线条又回来了。删除边距清理了一些东西（我只是使用 line-height 在标题周围创建一些空间）

【讨论】：