6

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

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

4

7 回答 7

5

删除background-color：

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

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

于 2012-11-08T11:39:31.660 回答
3

After one full day trying to solve this bug I can confirm that there's another workaround and it's probably an "easier" one.

In my case these solutions didn't work. In fact, applying them to the examples in the issue tracker of chrome (look for them here http://code.google.com/p/chromium/issues/detail?id=143354 ) didn't actually solve the problem. (PS: the problem is usually based on using the scrollbar and SOMETIMES in using the mouse scrolling).

Therefore I did some searches for services the worked and guess what:
Visual Website optimizer didn't have this problem
and they are indeed using and iframe, good job guys!

So, what solution did they use?
They used a fixed height. (yup!)

So, take the example in the chrome issue 143354 (the one with the red background, ok?) and change the code from

<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>

to

<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>

This will solve the problem of red lines.

To fix my webapp I needed to calculate the height on every window resize, put those margin/padding , and avoiding relative positioning on the iframe, nothing more.

Hope it helped (It almost drew me out of my mind to solve it)

于 2012-09-26T13:41:00.243 回答
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';
                    }
                }
});
于 2012-11-02T11:19:49.843 回答
2

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

<iframe ... style="position: relative"></iframe>
于 2012-11-09T08:14:36.877 回答
2

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

于 2012-12-19T20:42:47.363 回答
0

我发现可以通过稍微调整 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>
于 2012-09-07T15:48:08.913 回答
0

我遇到了类似的问题，并且能够通过将 -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 在标题周围创建一些空间）

于 2012-09-13T21:43:29.757 回答