”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 为什么在 Chrome 和 Opera 中单击锚链接时固定侧边栏会消失?

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

发布于2024-11-09
浏览:368

Why Do Fixed Sidebars Disappear When Clicking on Anchor Links in Chrome and Opera?

修复了 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 元素相关的渲染问题。

最新教程 更多>

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3