chrome 在滚动时会复制固定元素答案

【问题标题】：chrome gets fixed element replicated when scrollingchrome 在滚动时会复制固定元素
【发布时间】：2012-05-05 04:23:17
【问题描述】：

我使用的是chrome版本18.0.1025.162 m
我有一个带有 iframe 的 html 文件。

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

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

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

所以它看起来是这样的：滚动前：

滚动后（管理栏在屏幕上复制）

现在代码重现 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>

【问题讨论】：

标签： html css google-chrome browser

【解决方案1】：

我想我找到了解决方法。我创建了一个文件 background.png，其中有一个像素具有我想要的颜色 (#e0e0e0)。

然后我替换这个：

body 
{
     background: #e0e0e0;
}

用这个：

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

【讨论】：

【解决方案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的背景色改成同色的背景图呢？我对此进行了测试，并且有效。有这种可能吗？

【讨论】：

我无法编辑包含的文件，并且将此 css 添加到 iframe 并不能解决问题
抱歉，但改变背景颜色并不是承认失败的解决方法:)
好吧，如果它是一个 Chrome 错误（看起来像），那么在他们修补它之前，您可能会被困在一个解决方法中。

【解决方案3】：

我重新创建了您的设置，然后将script 添加到show.htm 的body。作为一项快速措施，我在main.htm 中的<iframe /> 中添加了name="if1"，但您始终可以在不使用显式指定名称的情况下找到元素的句柄。

它似乎解决了您提供的虚拟设置的问题，如果并且仅当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>

我还尝试了以下方法，直到该睡觉了！

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

我还尝试使用以下脚本应用j08691 的答案，但结果有点出乎意料。我导致absolute 定位的顶栏没有被修复，除其他外！

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

可能已经存在，但如果不存在，您能否将其作为相关项目的错误报告提交？

【讨论】：

我尝试了您的解决方案，但它不起作用？我报告了错误code.google.com/p/chromium/issues/…
我知道这并不能完全解决问题，只是在某些限制下提供了一种解决方法！ :) 再说一次，我只是提供我的发现，希望它可以帮助您找到解决方案，或者任何适合您的方法！
你最初是怎么遇到这个问题的？您的代码是否开放供建议，以便我们可以找到一种替代方法来实现结果，而无需尝试破解/修复已知错误？
我在工作期间遇到了它。我在这里提供的代码是我发现的导致错误的最小代码。
关于iframes 的另一种情况是，如果您将鼠标悬停在任何显示工具提示的东西上，只是一个标准的，并且您使用滚轮滚动，它会弄脏屏幕。

【解决方案4】：

改进/简化 yossi 的回答：

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

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

在 Chrome 18.0.1025.168、Mac OS X 10.6.8 上测试。

【讨论】：

【解决方案5】：

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

这看起来是 chrome 中的渲染错误。如果您向后滚动很慢，您会注意到您从管理栏中获得了纯色作为 iframe 的颜色。

顺便说一句，OSX 上的 chrome 渲染完全相同。

【讨论】：

谢谢，但问题是，正如我所写，我只能控制 iframe，所以我无法更改浮动：左；在#body-content 上。
您能否在设置float: none; 的页面中添加另一个#body-content css？
ok，是不是只能更改show.htm文件中的html？
是的，包括该文件中的 css。
添加另一个#body-content css的问题是它会使包含页面看起来很糟糕，我想保持包含页面的相同功能。

【解决方案6】：

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

【讨论】：

就像我说的，将浮动更改为无会损害网站功能，我只能更改 iframe (show.htm)
我不知道其他方法...对不起

【解决方案7】：

获取实际网站的实时演示/版本有助于进行更彻底的测试并解决错误。

无论如何，我都能重现该错误，然后修复它（有点）：

这是“显示”css：

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

这是我的测试页面的链接：

sotkra.com/t_main.html

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

干杯 G

【讨论】：

yossi，请尝试上述方法，让我知道它是否对您“有效”，就像它是一个有效的解决方案一样。考虑到您的要求，它确实解决了问题，但是，由于无法看到实际的真实网站，我无法判断它是否看起来很时髦
这不起作用，因为我不能再向下滚动。我的 iframe 很长，所以我需要滚动，这首先会导致错误。
问题是iframe自身滚动造成的，标准的页面滚动不会导致这个问题。让我看看我是否可以摆脱 iframe 自己的滚动条
对不起，看起来除非 adminbar 和 iframe 共享固定位置属性，否则你不走运

【解决方案8】：

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

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

【讨论】：