Question

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>标记：

http://www.youtube.com/watch?v=zkhH6di2M0c

当我点击锚链接时，固定的div有时会开始消失。

可以做些什么来避免这种行为？

Answer 1

Chrome解决方案：

将-webkit-transform: translateZ(0)添加到#sidebar为我解决了问题。

多年来，我使用translateZ(0)修复了许多Chrome显示错误。理由是通过调用3D转换，重新绘制与CSS痛苦堆栈的其余部分分开（我不能提供更多的细节，它几乎都是希腊语）。无论如何，它似乎对我有用！

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

Opera解决方案：

这不是通用的解决方案（需要根据相关元素的定位要求进行调整）。它的工作原理是强制连续重绘（通过CSS动画）在可能影响布局的属性上（强制计算和渲染其他布局因子，即保持固定定位），但实际上并非如此。在这种情况下，我使用了margin-bottom，因为这无法影响您的页面布局（但Opera不知道！）：

@keyframes noop {
  0%   { margin-bottom: 0; }
  100% { margin-bottom: 1em; }
}

#sidebar {
    animation: noop 1s infinite;
}

注意：解决方案并不完美，因为（至少在我的机器上），当Opera失去定位并快速重绘时，错误测试案例会导致一分钟闪烁。可悲的是，我认为这和你会得到的一样好，因为as George says in his answer，这是Opera在重绘之间的自然行为 - 理论上我的代码会重新绘制连续的元素，但实际上会有无穷小的空白。

编辑2 （2013-11-05）：我经常遇到此错误的变种。虽然原始海报的简化测试用例提供了一个完全合法的错误，但大多数情况都发生在已经在身体上进行3D变换的情况下（或者类似于DOM树的高位）。这通常被用作强制GPU渲染的黑客攻击，但实际上会导致像这样令人讨厌的重绘问题。 2无操作3D变换不合适：如果您在树上使用较高的树，请先尝试将其删除，然后再添加另一个。

编辑3 （2014-12-19）： Chris reports translateZ(0)在某些情况下不起作用scale3d(1,1,1)所在的地方。

Answer 2

Chrome的关键是：

 html, body {height:100%;overflow:auto}

通过添加它，固定位置问题应该是固定的。

Answer 3

如果您了解文档的正常流程是如何工作的，那么这是有意义的。让我们说这是一个边缘情况。

在任何元素中都没有声明高度，＃sidebar被position:fixed从文档的正常流程中删除。

如果您将高度属性添加到#sidebar（像素，而不是百分比），问题就解决了。

我建议包括Normalize.css，我认为它会处理这个bug。

Chrome渲染问题。固定位置锚，UL在体内

3 个答案:

Chrome解决方案：

Opera解决方案：