以下是一些基于问题的标题，它们抓住了本文的精髓： 清晰简洁： * 主体带有 UL 的固定位置锚：为什么它在 Chrome 和 Opera 中会损坏？ * 侧边栏消失

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

渲染问题描述

Google Chrome 和 Opera 出现渲染问题当在正文中实现具有固定位置侧边栏和无序列表 (UL) 的代码时。具体来说，点击锚链接后，侧边栏会立即消失。

Chrome 解决方案

要在 Chrome 中解决此问题，请将以下 CSS 属性应用于侧边栏：

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

这会调用 3D 转换，将重画与其他 CSS 操作分开并解决显示错误。

Opera 解决方案

对于 Opera，可以使用以下 CSS 动画来强制连续重画：

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

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

此解决方案迫使 Opera 不断计算和渲染布局因素，尽管存在 UL 元素，但仍保持侧边栏的固定位置。

注意

Opera 解决方案可能会导致重绘时会出现轻微闪烁。然而，这是目前此问题的最佳解决方案。

其他注意事项

当 DOM 树上方存在 3D 变换时，也可能会出现此错误的变体。首先删除此类转换以防止出现此问题。

在某些情况下，可能需要应用scale3d(1,1,1) 而不是translateZ(0) 来解决Chrome 中的问题。

以上是以下是一些基于问题的标题，它们抓住了本文的精髓： 清晰简洁： * 主体带有 UL 的固定位置锚：为什么它在 Chrome 和 Opera 中会损坏？ * 侧边栏消失的详细内容。更多信息请关注PHP中文网其他相关文章！