靜態定位顯着降低性能（？）

當我突然偶然發現一些奇怪的渲染性能問題時，我正在勾畫一個想法。我創建了一個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））

我的谷歌技能是這一個沒有任何幫助，任何人有這種行爲的答案。特別是在Safari中，這真的很怪異。

2015-11-12 Slebbo

我才能夠複製的塗料性能擊中一次，但我相信你應該能夠通過增加轉換來解決它：translateZ（0）在引起性能命中的元素上。 –

你應該是硬件加速元件，這些元件會出現這些問題，特別是固定元件需要在卷軸上重新繪製。當你將背景圖像設置爲覆蓋等時也是如此。

您可以通過這樣做： backface-visibility: hidden;

甚至： will-change: transform;

2015-12-02 00:43:44

回答