chrome 在滚动时会复制固定元素
Posted
技术标签:
【中文标题】chrome 在滚动时会复制固定元素【英文标题】：chrome gets fixed element replicated when scrolling 【发布时间】：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" ></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>
【问题讨论】：
【参考方案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;
【讨论】：
以上是关于chrome 在滚动时会复制固定元素的主要内容，如果未能解决你的问题，请参考以下文章
在 Chrome 中滚动时出现负 z-index 问题的画布