Chrome 渲染问题。体内带有 UL 的固定位置锚

2023-12-09

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

可以采取什么措施来避免此类行为？

镀铬解决方案：

Adding -webkit-transform: translateZ(0) to the #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;
}

Note:该解决方案并不完美，因为（至少在我的机器上）错误测试用例将导致 Opera 失去定位并快速重绘时出现一分钟的闪烁。可悲的是，我认为这已经是你能得到的最好的了，因为正如乔治在回答中所说，这是 Opera 在重绘之间的自然行为 - 理论上我的代码使元素的重绘连续，但实际上会有无限小的间隙。

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

EDIT 3(2014-12-19): Chris reports that translateZ(0)在某些情况下不起作用scale3d(1,1,1) does.

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)