57

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 有时会开始消失。

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

4

3 回答 3

169

铬解决方案：

为我解决-webkit-transform: translateZ(0)了#sidebar这个问题。

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

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

歌剧解决方案：

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

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

#sidebar {
    animation: noop 1s infinite;
}

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

编辑 2 (2013-11-05) ：从那以后我经常遇到这个错误的变体。尽管原始发布者的简化测试用例提出了一个完全合法的错误，但大多数情况都是在身体上已经有 3D 变换操作的情况下（或类似地在 DOM 树的高处）。这通常被用作强制 GPU 渲染的黑客手段，但实际上会导致像这样令人讨厌的重绘问题。2 个无操作 3D 变换不正确：如果您使用的是树上更高的一个，请先尝试删除它，然后再添加另一个。

编辑 3（2014-12-19）： 克里斯 报告说translateZ(0)在某些情况下scale3d(1,1,1)不起作用。

于 2013-03-04T14:31:10.373 回答
15

Chrome 的关键是：

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

通过添加这个，应该解决固定位置问题。

于 2013-03-04T14:34:09.860 回答
0

如果您了解文档的正常流程是如何工作的，那就有意义了。假设这是一个边缘案例。

在任何元素中都没有声明高度，并且#sidebar 被从文档的正常流程中取出position:fixed。

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

我建议包括 Normalize.css，我认为它会解决这个错误。

于 2013-03-06T11:09:30.963 回答