为什么在 Chrome 和 Opera 中单击锚链接时固定侧边栏会消失？

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

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

的存在是有必要的。页面上的元素加剧了此问题。

Chrome 解决方案

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

<code class="css">#sidebar {
    -webkit-transform: translateZ(0);
}</code>

登录后复制

Opera 解决方案

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

<code class="css">@keyframes noop {
  0%   { margin-bottom: 0; }
  100% { margin-bottom: 1em; }
}

#sidebar {
    animation: noop 1s infinite;
}</code>

登录后复制

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

其他注意事项

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

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

以上是为什么在 Chrome 和 Opera 中单击锚链接时固定侧边栏会消失？的详细内容。更多信息请关注PHP中文网其他相关文章！