Chrome bug: iframe rendering lines on screen when

2019-02-09 19:34发布

站内问答 / 移动开发
982 7 6

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

just encountered this problem, streaking up my screen on chrome, but not on firefox, or IE. anyone on a mac seen this?

7条回答
祖国的老花朵
2楼-- · 2019-02-09 19:58

The issue causing these visual anomalies has been confirmed fixed in the latest canary build of chrome (>= 25.0.1365.1 canary), so hopefully the chrome stable channel should have the fix fairly soon.

查看更多
0人赞 添加讨论(0) 举报
贪生不怕死
3楼-- · 2019-02-09 20:00

Had the same issue. Resolved by setting position style to relative:

<iframe ... style="position: relative"></iframe>
查看更多
0人赞 添加讨论(0) 举报
Viruses.
4楼-- · 2019-02-09 20:02

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)

查看更多
0人赞 添加讨论(0) 举报
地球回转人心会变
5楼-- · 2019-02-09 20:04

Removing the background-color:

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

in the CSS of the HTML document which is rendered into the iFrame did solve the issue in my case.

查看更多
0人赞 添加讨论(0) 举报
The star\"
6楼-- · 2019-02-09 20:11

Still same problem here using Windows 7 and chrome 22.0.1229.94 except white lines appear when scrolling down, not scrolling up. I've tried all solutions proposed but nothing seems to fix it. Setting -webkit-margin-after and -webkit-margin-before make lines disappear when scrolling down but now it appear when scrolling up. In chrome group forum, they say it should be fixed in 23 series but who knows...

Finally, can find a workaround (not so cool but works) inspired by some read.

Here it is:

$(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';
                    }
                }
});
查看更多
0人赞 添加讨论(0) 举报
淡お忘
7楼-- · 2019-02-09 20:14

I ran in to a similar problem and was able to fix it in my case by setting -webkit-margin-after and -webkit-margin-before to 0.

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

Also, I initially tried replacing the H1 with a span as in Jiri's example, but the lines came back when I tried to apply a top and bottom margin of .2em to the span. Removing margins cleaned things up (I just used line-height to create some space around the header)

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)