修复了 Google Chrome 和 Opera 中锚点和 UL 列表的定位问题

本文解决了在 Google Chrome 和 Opera 浏览器中观察到的渲染问题单击页面内的锚链接时，固定位置侧边栏可能会消失。页面上存在

元素会加剧此问题。

Chrome 解决方案

将 -webkit-transform:translateZ(0) 属性应用于固定侧边栏element 在 Chrome 中解决了这个问题。该技术在进行 3D 转换时利用了重绘和 CSS 渲染的分离，从而减轻了显示故障。

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

Opera 解决方案

在 Opera 中解决此问题需要采用不同的方法。我们使用 @keyframes 动画来强制对影响布局但对页面外观没有实际影响的 CSS 属性进行连续重绘。在本例中，我们对 margin-bottom 属性进行动画处理：

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

#sidebar {
    animation: noop 1s infinite;
}

值得注意的是，这个解决方案并不是完美无缺的。在某些情况下，当侧边栏失去定位并快速重绘时，可能会出现短暂的闪烁。 Opera 重绘之间的内在行为是导致此问题的原因。

其他注意事项

随后遇到的此错误在已应用 3D 变换的情况下经常发生主体或父元素。这种做法通常用于强制 GPU 渲染，但可能会导致持续的渲染问题。在实施上面提供的解决方案之前，请考虑删除现有的 3D 变换。

Google Chrome 和 Opera 现在可以处理固定定位，并提高稳定性。这些修复已证明可以有效解决与在页面上使用 UL 元素相关的渲染问题。