Question

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

刚刚遇到这个问题，在我的屏幕上浏览了chrome，但没有在firefox或IE上。 Mac上的任何人都看过这个？

Answer 1

删除background-color：

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

HTML文档的CSS中的

被渲染到iFrame确实解决了我的问题。

Answer 2

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

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

因此，我对服务进行了一些搜索并猜测了什么：
可视化网站优化工具没有此问题
他们确实在使用和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>

这将解决红线问题。

要修复我的webapp，我需要计算每个窗口调整大小的高度，放置那些边距/填充，并避免在iframe上相对定位，仅此而已。

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

Answer 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';
                    }
                }
});

Answer 4

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

来解决

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

Answer 5

导致这些视觉异常的问题已经在最新的镀铬金币（＆gt; = 25.0.1365.1金丝雀）中得到了确认，因此希望Chrome稳定通道能够很快得到修复。

Answer 6

我发现通过稍微摇动DOM可以解决这个Chrome错误。

E.g。这导致了这个问题：

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

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

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

Answer 7

我遇到了类似的问题，并且能够通过将-webkit-margin-after和-webkit-margin-before设置为0来修复它。

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

另外，我最初尝试用Jiri的例子中的跨度替换H1，但当我尝试将.2em的上下边距应用于跨度时，线条又回来了。删除边距清理了一些东西（我只是使用行高来在标题周围创建一些空间）

Chrome bug：向上滚动时iframe在屏幕上渲染线条

7 个答案: