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

小编典典

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

html

使用以下代码的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有时会开始消失。

如何避免这种行为？

阅读 246

2020-05-10

共1个答案

小编典典

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)呢。

2020-05-10