Statische Positionierung verlangsamt die Leistung drastisch (?)

Question

Ich skizzierte eine Idee, als ich plötzlich auf einige seltsame Rendering-Performance-Probleme stieß. Ich habe einen CodePen erstellt, um die Idee zu veranschaulichen, es ist ein Navigationselement, das von position: fixed zu position: static wechselt, wenn es mit der Fußzeile "kollidiert". Es sieht also so aus, als würde der Fuß nach oben drücken.

Es ist kein fehlerhaftes JS (ich habe es ohne JS versucht), das die Leistung verlangsamt, wenn sich der Positionsmodus ändert. Es ist, was ich gefunden habe die CSS-Eigenschaft, die es viel schwerer macht für den Browser beim Scrollen rendern.

In IE10/Firefox scheint es gut zu funktionieren, In Chrome kann man im webinspectors fps-meter sehen, dass es viel schwerer zu rendern ist.

Obwohl, das seltsamste von allen fand ich; in Safari ist es viel langsamer zu rendern. Aber Hinzufügen eines zusätzlichen Elements mit position: fixed macht Safari es am besten rendern. (Safari Version 9.0.1 (11601.2.7.2))

Mit extra festem Elemente: http://codepen.io/slebbo/pen/GpPRQX

Ohne zusätzliches festes Element: http://codepen.io/slebbo/pen/avPZxy

Meine googleen Fähigkeiten mit diesen keine Hilfe waren, jeder, der habe eine Antwort auf dieses Verhalten. Gerade bei Safari ist das wirklich irre.

Answer 1

Sie sollten hardware-beschleunigende Elemente sein, die diese Probleme verursachen, insbesondere fixierte Elemente müssen auf Scroll neu lackiert werden. Das gleiche gilt, wenn Hintergrundbilder zur Deckung und so weiter eingestellt sind.

Sie können dies tun, indem Sie: backface-visibility: hidden;

oder sogar: will-change: transform;