8

I am using chrome version 18.0.1025.162 m
I have html file with iframe within it.

i cant change the containing page or its css (main.htm)
i can only change the iframe (show.htm) and its css.

The problem is that when i scroll down and then scroll back up then the adminbar div get replicated several time.
I am attaching 2 screenshots the first one is the screen before scrolling and i also add the code so that the bug can be reproduced.

I think it may be a bug in chrome, i am not sure.
I would like to know if it is a a bug and more importantly if there is a work around by only changing the iframe and that it does not include removing the background color from the iframe.
(removing the background color from the iframe solve the issue but i need the background color)

so this is how it looks: before scrolling: enter image description here

after scrolling (admin bar get replicated on screen) enter image description here

now code to reproduce the bug in chrome

first file - main.htm (i cannot change this code)

<!-- main.htm -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#adminbar 
{
    background-color: #464646;
    height: 28px;
    position: fixed;
    width: 100%;
    top: 0;   
 }

 #body-content 
 {
    float: left;
    width: 100%;
 }
 </style>

 </head>
 <body >
 <div id="body-content">
    <iframe src="show.htm" width="100%" height="943"></iframe>

    <div id="adminbar" class="" role="navigation">
    </div>
 </div>

 </body>
 </html>

and the show.htm

<!-- show.htm -->
<!DOCTYPE html>
<head>
<style type="text/css">
body 
{
    background: #e0e0e0;
}
</style>
</head>
<body>
 <br/>
<p style='margin-bottom:500px;'>bazinga</p>
<p style='margin-bottom:500px;'>bazinga</p>
<p style='margin-bottom:500px;'>bazinga</p>
</body>
</html>

8 Answers 8

7

i think i found a workaround. i created a file background.png which has one pixel with the color i want (#e0e0e0).

i then replace this:

body 
{
     background: #e0e0e0;
}

with this:

body 
{
    background: #e0e0e0 url(background.png) repeat-x;
    background-attachment: fixed;
}
4

Add -webkit-transform: translate3d(0,0,0); to your body-content CSS

CSS

#body-content {
   float: left;
   width: 100%;
   -webkit-transform: translate3d(0,0,0);
}

This seems to force Chrome to use your GPU and smooth out the rendering issue.

UPDATE: Since you can't change main.htm, what about changing the background color of show.htm to a background image of the same color? I tested this and it worked. Is that a possibility?

3
  • i cant edit the containing file ,and adding this css to the iframe does not solve the problem
    – yossi
    Apr 29, 2012 at 16:30
  • sorry but changing the background color is not a workaround its admitting defeat :)
    – yossi
    Apr 29, 2012 at 17:40
  • Well if it is a Chrome bug (which it looks like) then you're probably going to be stuck with a workaround until they patch it.
    – j08691
    Apr 29, 2012 at 18:56
2

I recreated your setup and then added a script to the body of show.htm. As a quick measure I added a name="if1" to the <iframe /> in main.htm, but you could always find a handle on the element without using an explicitly assigned name.

It seems to solve the issue for the dummy setup that you provided, if and only if main.htm is scrolled all the way to the top. Think it's weird, join the club! See if this works for the real thing... Either way, it may just be a nudge in the right direction! :)

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body 
{
    background: #e0e0e0;
}
</style>
</head>
<body>
<br/>
<p style="margin-bottom:500px;">bazinga</p>
<p style="margin-bottom:500px;">bazinga</p>
<p style="margin-bottom:500px;">bazinga</p>
<script type="text/javascript">
    window.onscroll = function(){
        console.log("It's 'Doctor' Sheldon Cooper!");
        //parent.document.if1.document.body.style.webkitTransform = 'scale(1)';
        var _parentScale = parent.document.body.style.webkitTransform;
        parent.document.body.style.webkitTransform = _parentScale;
    }
</script>
</body>
</html>​​​​​​​​​​​​​​​

I also tried to experiment with the following until it became bed-time!

<script type="text/javascript">
    window.onscroll = function(){
        console.log("It's 'Doctor' Sheldon Cooper!");
        //parent.document.if1.document.body.style.webkitTransform = 'scale(1)';
        var _me = document.body;
        _me.style.webkitTransform = _me.style.webkitTransform;
        //_me.style.display='none';
        _me.offsetHeight
        //_me.style.display='block';

        var _parent = parent.document.body;
        _parent.style.webkitTransform = _parent.style.webkitTransform;
        _parent.style.display=_parent.style.display;
        _parent.offsetHeight
        //_parent.style.display='block';
    }
    parent.window.onscroll = function(){
        console.log("But. You're in my spot!");
        //parent.document.if1.document.body.style.webkitTransform = 'scale(1)';
        var _me = document.body;
        _me.style.webkitTransform = _me.style.webkitTransform;
        //_me.style.display='none';
        _me.offsetHeight
        //_me.style.display='block';

        var _child = parent.document.if1.document.body;
        _child.style.webkitTransform = _child.style.webkitTransform;
        _child.style.display=_child.style.display;
        _child.offsetHeight
        //_child.style.display='block';
    }
</script>

I also attempted to apply j08691's answer, using the following script, but it gave slightly unexpected results. I caused the absolute positioned top bar, to not be fixed, among other things!

    window.onload = function(){
        console.log("It's 'Doctor' Sheldon Cooper!");
        var test = parent.document.getElementById("body-content");
        test.style.webkitTransform = "translate3d(0,0,0)";
    }

One may already exist, but if not, could you file this as a bug report on the relevent projects?

5
  • 1
    i try your solution but it does not work ?, and i reported the bug code.google.com/p/chromium/issues/…
    – yossi
    Apr 30, 2012 at 8:00
  • I know that it's not fixing the problem altogether, only providing a workaround under certain constraints! :) Yet again, I only provided my findings in the hope that it helps you derive a solution, or whatever works for you!
    – bPratik
    Apr 30, 2012 at 20:55
  • How did you encounter the problem in the first place? Is your code open for suggestion so that we can find an alternative approach to achieve the result without trying to hack/fix a known bug?
    – bPratik
    Apr 30, 2012 at 20:57
  • i encountered it during my work.the code i provided here is the minimal i found to cause the bug.
    – yossi
    May 1, 2012 at 5:42
  • There is another scenario concerning iframes where if you hover over anything that shows a tooltip, just a standard one, and you scroll with the wheel, it smudges the screen.
    – bPratik
    May 1, 2012 at 9:29
1
+50

Improving / simplifying yossi's answer:

body 
{
    background:url('bg.png');
}

no need to declare bg-color or repeat-x, just needs a background image.

Tested on Chrome 18.0.1025.168, Mac OS X 10.6.8.

Screenshot

0
1

Remove the float: left; from your #body-content css and it will work just fine.

This looks to be a rendering bug in chrome. If you scroll back up really slowly, you'll notice that you get a solid colour from your admin bar as the colour of your iframe.

Incidentally chrome on OSX renders exactly the same.

6
  • thanks but the problem is that as i wrote i only have control over the iframe so i cant change the float:left; on the #body-content.
    – yossi
    Apr 29, 2012 at 8:15
  • can you add another #body-content css to your page that sets float: none;?
    – pms1969
    Apr 29, 2012 at 8:26
  • 1
    ok, does this mean that you can only change the html in the show.htm file?
    – pms1969
    Apr 29, 2012 at 8:35
  • yeah including the css in that file.
    – yossi
    Apr 29, 2012 at 9:31
  • the problem with adding another #body-content css is that it will make the containing page look bad, i want to keep the same functionality of the containing page.
    – yossi
    Apr 29, 2012 at 9:34
1
#adminbar {
background-color: #464646;
height: 28px;
position: fixed;
width: 100%;
top: 0;
right:0px
}
#body-content {
float: none;
width: 100%;
}
2
  • like i said, changing the float to none will hurt the website functionality, i can only change the iframe (show.htm)
    – yossi
    Apr 29, 2012 at 16:18
  • I don't know other ways... sorry
    – Idrizi.A
    Apr 29, 2012 at 16:24
1

It would help to get a live-demo/version of your actual website to do more thorough testing and sort the bug out.

In any case, I was able to reproduce the bug and then fix it (kind of):

Here's the 'show' css:

body 
{
    background: #e0e0e0;
    height:100%;
    width:100%;
    z-index:9999;
    position:fixed;
}

and Here's the link to my test page:

sotkra.com/t_main.html

last but not least, yes it is a bug and it caused by the flickering of the scrolling of the iframe content against the actual 'base' document. I've seen similar issues before but there was equally no documentation about it. They're just rendering bugs, usually caused by less than specific css or very very odd cases where it's nobody's fault save the browser's.

Cheers G

4
  • yossi, please try the above and let me know if it 'works' for you as in if it's a valid solution. It does indeed fix the problem taking into consideration your requirements, however, being unable to see the actual real website, I can't tell if it'll look funky or not
    – Capagris
    May 1, 2012 at 3:28
  • 1
    this does not work because i can no longer scroll down. my iframe is long so i need scrolling which causes the bug in the first place.
    – yossi
    May 1, 2012 at 6:44
  • the problem is caused by the iframe's own scrolling, the standard page scroll does not cause this. Let me see if I can get rid of the iframe's own scrollbar
    – Capagris
    May 1, 2012 at 11:38
  • sorry man, looks like unless both adminbar and the iframe share the fixed position property, you're out of luck
    – Capagris
    May 1, 2012 at 11:50
1

Using a gradient as your background image also works. This is preferable for me, because I don't have to create an image file and it doesn't generate an extra request on the client side.

body {
  background: #FFF -webkit-linear-gradient(top, #FFF, #FFF) repeat-x;
  background-attachment: fixed;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.