html - 静态定位会大大降低性能(？)

Question

当我突然偶然发现一些奇怪的渲染性能问题时，我正在草拟一个想法。我创建了一个 CodePen 来说明这个想法，它是一个导航元素，当它与页脚“碰撞”时，它会从 position: fixed 更改为 position: static。所以它看起来像是页脚将其向上推。

当位置模式改变时，没有错误的 JS(我试过没有 JS)会降低性能。这就是我发现的 CSS 属性，它使它变得很多滚动时浏览器呈现的重量更重。

在 IE10/Firefox 中，它似乎工作正常，在 Chrome 中，可以在 webinspectors fps-meter 中看到渲染要重得多。

虽然，这是我发现的最奇怪的；在 Safari 中，渲染速度很多慢。 但是 添加一个带有position: fixed 的额外元素可以让Safari 渲染得最好。 (Safari 版本 9.0.1 (11601.2.7.2))

带有额外的固定元素:http://codepen.io/slebbo/pen/GpPRQX

没有额外的固定元素:http://codepen.io/slebbo/pen/avPZxy

我的谷歌技能对这个没有帮助，任何人都可以回答这种行为。特别是对于 Safari，这真的很时髦。

Answer 1

你应该是硬件加速元素，它会产生这些问题，特别是固定元素需要在滚动上重新绘制。当您将背景图像设置为覆盖等时也是如此。

您可以使用:背面可见性:隐藏；

甚至:will-change: transform;