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

Question

当我偶然发现一些奇怪的渲染性能问题时,我正在勾勒出一个想法.我创建了一个CodePen说明的想法,其从改变导航元素position: fixed来position: static当"碰撞"与页脚.所以看起来这个页脚推动了它.

这不是没有错误的JS(我试过没有JS),当位置模式改变时,它会降低性能.这就是我发现的CSS属性,它使浏览器在滚动时渲染的重量更大.

在IE10/Firefox中,它似乎运行良好,在Chrome中,人们可以在webinspectors fps-meter中看到渲染时要重得多.

虽然,我发现的最奇怪的是; 在Safari中,这是一个很大较慢的渲染.但是添加一个额外的元素position: fixed使Safari最好地渲染它.(Safari Version 9.0.1(11601.2.7.2))

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

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

我的谷歌技能对这个没有任何帮助,任何有这种行为答案的人.特别是对于Safari,这真的很时髦.

Answer 1

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

您可以使用以下方法来做到这一点： backface-visibility: hidden;

甚至： will-change: transform;