Chrome渲染问题。 固定位置锚与UL在身体
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> 正如你所看到的，我正在试图让侧边栏静态在右侧。 一切工作正常，直到你在页面上添加一些<UL>标签：
固定div有时开始消失，当我点击锚链接。
可以做些什么来避免这种行为？
Chrome解决scheme：
添加-webkit-transform: translateZ(0)到#sidebar为我解决了这个问题。
我使用translateZ(0)多年来修复了大量的Chrome显示器错误。 基本原理是，通过调用3D转换，重新绘制与CSS痛苦堆栈的其余部分是分开的（我不能提供比这更多的细节，这对我来说几乎都是希腊语）。 无论如何，它似乎为我工作！
#sidebar { -webkit-transform: translateZ(0); }
Opera解决scheme：
这不是一个通用的解决scheme（需要根据所讨论元素的定位要求进行调整）。 它通过对可能影响布局的属性（通过CSSanimation）强制连续重绘（强制其他布局因子进行计算和渲染，即保持固定位置），但实际上并非如此。 在这种情况下，我使用margin-bottom ，因为没有办法影响你的页面布局（但Opera不知道！）：
@keyframes noop { 0% { margin-bottom: 0; } 100% { margin-bottom: 1em; } } #sidebar { animation: noop 1s infinite; }
注意：这个解决scheme并不完美，因为（至less在我的机器上），错误testing用例会导致Opera丢失定位并快速重新绘制一分钟闪烁。 不幸的是，我认为这是一样好，因为如乔治在他的回答中所说 ，这是Opera重绘之间的自然行为 – 理论上我的代码重绘元素连续，但实际上会有无穷小的差距。
编辑2 （2013-11-05） ：我以后经常遇到这个bug的变种。 虽然原始海报的简化testing用例提供了一个完全合法的bug，但是大多数情况下，已经有一个在body上运行的3D转换（或者类似于DOM树）。 这通常被用来强制GPU渲染，但实际上会导致这样的讨厌的重绘问题。 2无操作的3D转换不能做出正确的select：如果您使用的树更高，请先删除它，然后再添加另一个树。
编辑3 （2014-12-19） ： 克里斯 报告 translateZ(0)在scale3d(1,1,1)某些情况下不起作用。
Chrome的关键是：
html, body {height:100%;overflow:auto}
通过增加这个，定位问题应该是固定的。
如果您了解文档的正常stream程如何工作，这是有道理的。 假设这是一个边缘情况。
没有在任何元素中声明高度，并且#sidebar是由position:fixed ，从文档的正常stream程中取出的。
如果您将高度属性添加到#sidebar（像素，而不是百分比），问题就解决了。
我会build议包括Normalize.css，我认为它会照顾的错误。
