Question

我正在使用Chrome版本18.0.1025.162 m
我在其中有iframe的html文件。

我无法更改包含页面或其css（main.htm）
我只能更改iframe（show.htm）及其css。

问题在于，当我向下滚动然后向上滚动时，管理栏div会被多次复制我附加了2个屏幕截图，第一个是滚动前的屏幕，我还添加了代码，以便可以重现错误。

我认为这可能是铬的一个错误，我不确定我想知道它是否是一个错误，更重要的是，如果只是通过更改iframe进行解决，并且它不包括从iframe中删除背景颜色。
（从iframe中删除背景颜色解决了问题，但我需要背景颜色）

所以这就是它的样子：在滚动之前： enter image description here

滚动后

（管理栏在屏幕上复制） enter image description here

现在编码重现chrome

中的错误

第一个文件 - main.htm（我无法更改此代码）

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

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

Answer 1

我想我找到了一个解决方法。我创建了一个文件background.png，它有一个像素我想要的颜色（＃e0e0e0）。

然后我将其替换为：

body 
{
     background: #e0e0e0;
}

用这个：

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

Answer 2

将-webkit-transform: translate3d(0,0,0);添加到您的正文内容CSS

CSS

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

这似乎迫使Chrome使用您的GPU并消除渲染问题。

更新：由于您无法更改main.htm，将show.htm的背景颜色更改为相同颜色的背景图像怎么样？我测试过它并且有效。这有可能吗？

Answer 3

我重新创建了您的设置，然后将script添加到body的{{1}}。作为一项快速衡量标准，我向show.htm中的name="if1"添加了<iframe />，但您始终可以在不使用明确指定名称的情况下找到该元素的句柄。

似乎解决了您提供的虚拟设置的问题， if ，并且只有main.htm一直滚动到顶部。认为这很奇怪，加入俱乐部！看看这是否适用于真实的东西......无论哪种方式，它可能只是在正确的方向推动！：）

main.htm

我还试着尝试以下内容，直到它成为睡觉时间！

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

我还尝试使用以下脚本应用j08691的答案，但结果略有意外。我导致<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>定位顶部栏，不修复，等等！

absolute

一个可能已经存在，但如果没有，你可以将其作为相关项目的错误报告提交吗？

Answer 4

从您的float: left; css中删除#body-content，它会正常运行。

这看起来是chrome中的渲染错误。如果你向后滚动的速度很慢，你会注意到你的管理栏中的颜色是你的iframe的颜色。

顺便提一下，OSX上的chrome渲染完全相同。

Answer 5

#adminbar {
background-color: #464646;
height: 28px;
position: fixed;
width: 100%;
top: 0;
right:0px
}
#body-content {
float: none;
width: 100%;
}

Answer 6

有助于获得实际网站的实时演示/版本，以便进行更全面的测试并对错误进行排序。

无论如何，我能够重现错误然后修复它（种类）：

这是'show'css：

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

以下是我的测试页面的链接：

sotkra.com/t_main.html

最后但并非最不重要，是的，它是一个错误，它是由iframe内容滚动对实际“基础”文档的闪烁引起的。我以前见过类似的问题，但同样没有关于它的文档。它们只是渲染错误，通常是由不太具体的css或非常奇怪的情况造成的，除了浏览器之外没有人会有错。

干杯 ģ

Answer 7

改善/简化yossi的回答：

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

无需声明bg-color或repeat-x，只需要背景图片。

在Chrome 18.0.1025.168，Mac OS X 10.6.8。

上测试

Screenshot

Answer 8

使用渐变作为背景图像也可以。这对我来说是优选的，因为我不必创建图像文件，也不会在客户端生成额外的请求。

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

滚动时，chrome会复制固定元素

现在编码重现chrome

8 个答案: