Il posizionamento statico rallenta drasticamente le prestazioni (?)

Question

Stavo tracciando un'idea quando all'improvviso sono incappato in strani problemi di rendering. Ho creato un CodePen per illustrare l'idea, è un elemento di navigazione che cambia da position: fixed a position: static quando "collide" con il piè di pagina. Quindi sembra che il footer lo spinga verso l'alto.

Non è un buggy JS (ho provato senza JS) che rallenta le prestazioni quando cambia la modalità di posizione. È quello che ho trovato la proprietà CSS che lo rende molto più pesante per il browser da renderizzare durante lo scorrimento.

In IE10/Firefox sembra funzionare bene, in Chrome si può vedere nel webinspectors fps-meter che è molto più pesante da renderizzare.

Sebbene, il più strano di tutti ho trovato; in Safari, è molto più lento da renderizzare. MA aggiungendo un elemento aggiuntivo con position: fixed rende Safari renderlo il migliore di tutti. (Safari versione 9.0.1 (11601.2.7.2))

con elemento fisso in più: http://codepen.io/slebbo/pen/GpPRQX

Senza elemento fisso in più: http://codepen.io/slebbo/pen/avPZxy

Le mie capacità di Google sono stati di alcun aiuto con questo, tutti coloro che avere una risposta a questo comportamento Soprattutto con Safari, è davvero divertente.

Answer 1

Si dovrebbero essere elementi di accelerazione hardware che danno questi problemi, in particolare gli elementi fissi devono essere ridipinti su scroll. Lo stesso quando hai le immagini di sfondo impostate per coprire e così via.

È possibile farlo utilizzando: backface-visibility: hidden;

o anche: will-change: transform;