Html Chrome 渲染问题。带有 UL 本体的固定位置锚栓
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15152470/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chrome rendering issue. Fixed position anchor with UL in body
提问by sunsay
There is a rendering issue with Google Chrome and Opera (why?=) with such code:
Google Chrome 和 Opera 存在渲染问题（为什么？=）使用以下代码：
<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>
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:
如您所见，我正在尝试将右侧的侧边栏设为静态。一切正常，直到您<UL>在页面上添加一些标签：
http://www.youtube.com/watch?v=zkhH6di2M0c
http://www.youtube.com/watch?v=zkhH6di2M0c
The fixed div sometimes starts to disappear when I click anchor links.
当我单击锚链接时，固定的 div 有时会开始消失。
What can be done to avoid such behavior?
可以做些什么来避免这种行为？
回答by Barney
Chrome solution:
铬解决方案：
Adding -webkit-transform: translateZ(0)to the #sidebarfixed the issue for me.
添加-webkit-transform: translateZ(0)到#sidebar为我修复的问题。
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!
translateZ(0)多年来，我曾经修复过许多 Chrome 显示错误。基本原理是通过调用 3D 转换，重新绘制与 CSS 痛苦堆栈的其余部分分开（我无法提供更多细节，对我来说几乎都是希腊语）。无论如何，它似乎对我有用！
#sidebar {
-webkit-transform: translateZ(0);
}
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!):
这不是通用解决方案（需要根据相关元素的定位要求进行调整）。它的工作原理是在可能影响布局的属性上强制连续重绘（通过 CSS 动画）（强制计算和呈现其他布局因素，即保持固定定位），但实际上不会。在这种情况下，我使用了margin-bottom，因为这不会影响您的页面布局（但 Opera 不知道！）：
@keyframes noop {
0% { margin-bottom: 0; }
100% { margin-bottom: 1em; }
}
#sidebar {
animation: noop 1s infinite;
}
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.
注意：该解决方案并不完美，因为（至少在我的机器上）由于 Opera 失去定位并快速重绘，错误测试用例将导致一分钟的闪烁。可悲的是，我认为这和你会得到的一样好，因为正如乔治在他的回答中所说，这是 Opera 在重绘之间的自然行为——理论上我的代码使元素的重绘连续，但在实践中会有无穷小的差距。
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.
编辑 2(2013-11-05) ：此后我经常遇到此错误的变体。尽管原始发布者的简化测试用例提出了一个完全合法的错误，但大多数情况发生在已经有 3D 变换在身体上（或类似的 DOM 树的高处）的情况下。这通常被用作强制 GPU 渲染的 hack，但实际上会导致像这样令人讨厌的重绘问题。2 次无操作 3D 转换不正确：如果您使用的是树上的一个，请先尝试将其删除，然后再添加另一个。
EDIT 3(2014-12-19):Chrisreportsthat translateZ(0)doesn't work in some cases where scale3d(1,1,1)does.
回答by Corneliu
The key for Chrome is:
Chrome的关键是：
html, body {height:100%;overflow:auto}
By adding this, the fixed position problem should be fixed.
通过添加这个，固定位置问题应该是固定的。
回答by George Katsanos
It makes sense if you understand how Normal Flow of the document works. Let's say it's an edge case scenario.
如果您了解文档的正常流程是如何工作的，这很有意义。假设这是一个边缘情况。
There is no height declared in any element and #sidebar is taken OUT of the normal flow of the document by being position:fixed.
在任何元素中都没有声明高度，并且 #sidebar 通过 is 被从文档的正常流中移除position:fixed。
If you add a height property to #sidebar (pixels, not percentages) the problem is solved.
如果向#sidebar（像素，而不是百分比）添加高度属性，问题就解决了。
I would suggest including Normalize.css, I think it will take care of the bug.
我建议包括 Normalize.css，我认为它会解决这个错误。
