Chrome渲染问题。固定式锚栓，主体带UL

Chrome渲染问题。固定式锚栓，主体带UL Chrome解决方案：

为我增加

-webkit-transform: translateZ(0)

了

#sidebar

解决问题的方法。

这些年来，我曾经

translateZ(0)

修复过许多Chrome显示错误。理由是通过调用3D转换，重画与CSS痛苦堆栈的其余部分分开了（我无法提供更多细节，这对我来说几乎就是希腊文）。无论如何，它似乎对我有用！

    #sidebar {        -webkit-transform: translateZ(0);    }

Opera解决方案：

这不是通用解决方案（将根据相关元素的定位要求进行调整）。它通过对可能影响布局的属性（通过CSS动画）强制进行连续重绘（通过CSS动画）（强制计算和渲染其他布局因子，即保持固定的位置）而起作用，但实际上不起作用。在这种情况下，我使用了

margin-bottom

，因为这不会影响您的页面布局（但是Opera并不知道！）：

@keyframes noop {  0%   { margin-bottom: 0; }  100% { margin-bottom: 1em; }}#sidebar {    animation: noop 1s infinite;}

注意：
解决方案不是完美的，因为（至少在我的机器上）bug测试用例会导致一分钟的闪烁，因为Opera失去定位并快速重绘。可悲的是，我认为这是您将得到的，因为正如George在他的回答中所说，这是Opera在重绘之间的自然行为-理论上，我的代码使元素的重绘是连续的，但实际上会存在无限的差距。

编辑2 （2013-11-05） ：
此后，我经常遇到此错误的变体。尽管原始发布者的简化测试用例呈现出完全合法的错误，但大多数情况是在人体上已经存在3D变换（或类似地位于DOM树上方）的情况下发生的。这通常用作强制GPU渲染的黑客手段，但实际上会导致类似这样的讨厌的重画问题。2种无 *** 作3D转换并不正确：如果您在树的上方使用一棵树，请尝试先将其移除，然后再添加另一棵树。

编辑3 （情节中字） ： 克里斯报告说

translateZ(0)

不会在某些情况下工作

scale3d(1,1,1)

呢。