Chrome呈现问题。固定位置锚杆，带UL [英] Chrome rendering issue. Fixed position anchor with UL in body
问题描述
Google Chrome和Opera（为什么？=）使用此类代码存在渲染问题：
There is a rendering issue with Google Chrome and Opera (why?=) with such code:
<html>
<style>
#content {
width: 150px;
background: gray;
}
#sidebar {
position: fixed;
left: 200px;
background: gray;
}
</style>
<body>
<div id="sidebar">
<a href="#s1">Link #1</a><br/>
<a href="#s2">Link #2</a>
</div>
<div id="content">
<div id="s1">
<a href="#s1">Link #1 TARGET</a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="s2">
<a href="#s2">Link #2 TARGET</a>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
<a href="#">TOP</a>
</body>
</html>
正如你所看到的，我试图使sidebar静态在右边。
一切正常，直到您在页面上添加一些< UL> 标记：
As you can see, I am trying to make sidebar static on the right side.
Everything works fine, until you add some <UL> tag on the page:
a href =http://www.youtube.com/watch?v=zkhH6di2M0c> http://www.youtube.com/watch?v=zkhH6di2M0c
http://www.youtube.com/watch?v=zkhH6di2M0c
当我点击锚点链接时，固定的div有时开始消失。
The fixed div sometimes starts to disappear when I click anchor links.
可以做些什么来避免这种行为？
What can be done to avoid such behavior?
推荐答案
Chrome解决方案：
添加 -webkit-transform：translateZ ）到 #sidebar 解决了我的问题。
Chrome solution:
Adding -webkit-transform: translateZ(0) to the #sidebar fixed the issue for me.
translateZ（0）多年来修复了许多Chrome显示错误。原理是通过调用3D变换，重新绘制与CSS剩余的CSS堆栈（我不能提供更多的细节，这是几乎所有希腊语对我）。无论如何，它似乎为我工作。
I've used translateZ(0) to fix numerous Chrome display bugs over the years. The rationale is that by invoking 3D transformation, re-paint is separated from the rest of the CSS pain stack (I can't provide much more detail than that, it's pretty much all Greek to me). In any case, it appears to work for me!
#sidebar {
-webkit-transform: translateZ(0);
}
Opera解决方案：
这不是一个通用的解决方案（需要根据相关元素的定位要求进行调整）。它通过在可能影响布局的属性上强制连续重绘（通过CSS动画），迫使其他布局因素被计算和渲染，即保持固定位置，但实际上不是。在这种情况下，我使用 margin-bottom ，因为没有办法影响你的页面布局（但Opera不知道！）：
Opera solution:
This is not a generic solution (will need to be tweaked depending on the positioning requirements of the element in question). It works by forcing continuous repaints (via CSS animation) on a property that could affect layout (forcing other layout factors to be calculated and rendered, ie maintaining fixed positioning), but in practice do not. In this case, I've used margin-bottom, because there's no way that's going to affect your page layout (but Opera doesn't know that!):
@keyframes noop {
0% { margin-bottom: 0; }
100% { margin-bottom: 1em; }
}
#sidebar {
animation: noop 1s infinite;
}
注意：解决方案不完美（至少在我的机器上）bug测试用例会导致一个微小的闪烁，因为Opera失去定位和快速重画。可悲的是，我认为这是你会得到的，因为
Note: the solution is not perfect, in that (on my machine at least) the bug test cases will result in a minute flicker as Opera loses positioning and quickly redraws. Sadly I think this is as good as you will get, because as George says in his answer, this is Opera's natural behaviour between redraws — in theory my code makes redraw for the element continuous, but in practice there will be infinitesimal gaps.
编辑2 （2013-11-05）：我经常遇到这个错误的变化。虽然原始海报的简化测试用例呈现完全合法的错误，但是大多数情况都发生在已经在主体上运行的3D变换的情况下（或者类似地高的DOM树）。这通常用作强制GPU渲染的黑客，但实际上会导致讨厌的重绘问题，像这样。 2没有操作的3D变换没有正确的：如果你使用一个更高的树，请先尝试删除它，然后再添加一个。
EDIT 2 (2013-11-05): I've since encountered variations of this bug quite often. Although the original poster's reduced test case presents a perfectly legitimate bug, most occurences have been in situations where there is already a 3D transform operating on the body (or similarly high up the DOM tree). This is often used as a hack to force GPU rendering, but will actually lead to nasty repaint issues like this. 2 no-op 3D transforms don't make a right: if you're using one higher up the tree, try removing it first before adding another one.
EDIT 3 （2014-12-19）： Chris < a href =http://stackoverflow.com/questions/15152470/chrome-rendering-issue-fixed-position-anchor-with-ul-in-body/15203880#comment30610117_15203880>报告 translateZ（0）在 scale3d（1,1,1）时不起作用。
EDIT 3 (2014-12-19): Chris reports that translateZ(0) doesn't work in some cases where scale3d(1,1,1) does.
这篇关于Chrome呈现问题。固定位置锚杆，带UL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
