为什么单击 UL 链接时我的固定位置锚点在 Chrome 和 Opera 中消失？

Chrome 和 Opera 渲染问题：固定位置锚点在正文中带有 UL

在某些浏览器（例如 Chrome 和 Opera）中，尝试定位时可能会出现特殊的渲染问题UL 标签旁边的固定元素。此问题表现为固定元素在单击锚链接后立即消失。

根本原因

此问题的根本原因归因于这些浏览器在页面上的元素更新时处理重绘的方式。具体来说，固定元素可能会在重新绘制过程中暂时失去其位置。

Chrome 解决方案

要在 Chrome 中解决此问题，您可以对有问题的固定元素应用 translateZ(0) 转换。此操作有效地触发 3D 转换，将重绘过程与 CSS 堆栈的其余部分隔离，从而缓解定位问题。

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

Opera 解决方案

对于 Opera，略有不同的方法是必须的。在这种情况下，您可以创建一个 CSS 动画，连续重新绘制影响布局但不影响元素视觉外观的属性，例如 margin-bottom。这种方法愚弄 Opera 执行连续重绘，确保固定元素保持其位置。

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

#sidebar {
    animation: noop 1s infinite;
}

注意

需要注意的是，此解决方案可能不是万无一失的，并且可能会导致轻微的错误。当 Opera 尝试重新获得固定位置时闪烁。这种限制是 Opera 处理重画过程的方式所固有的，因此很难完全消除视觉伪影。

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