当我偶然发现一些奇怪的渲染性能问题时，我正在草拟一个想法。
我已经创建了一个CodePen来说明这个想法，它是一个导航元素，当它与＃{1}}发生碰撞时会从position: fixed变为position: static。与页脚。所以看起来这个页脚推动了它。
没有错误的JS（我试过没有JS）在位置模式改变时会降低性能。这就是我发现CSS属性的原因 滚动时浏览器渲染的重量更大。
在IE10 / Firefox中，它似乎运行良好，在Chrome中，人们可以在网络摄像师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，这真的很时髦。
答案 0 :(得分：1)
你应该是硬件加速元素，它们会产生这些问题，特别是在滚动时需要重新绘制固定元素。将背景图像设置为覆盖等时也是如此。
您可以使用以下方法执行此操作：
backface-visibility: hidden;
甚至：
will-change: transform;