Home/ Questions/Q 7898001
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T08:18:56+00:00

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

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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