Static positioning drastically slows performance (?)

Question

I was sketching on an idea when I suddenly stumbled upon some weird rendering performance issues. I've created a CodePen to illustrate the idea, its a navigation element that change from position: fixed to position: static when it "collides" with the footer. So it looks like the footer pushing it up.

It's no buggy JS (I tried without JS) that slows the performance down when position-mode changes. It's what I've found the CSS property that makes it a lot heavier for the browser to render when scrolling.

In IE10/Firefox it seems to work fine, In Chrome one can see in the webinspectors fps-meter that it's a lot heavier to render.

Although, the weirdest of all I found; in Safari, it's a lot slower to render. BUT adding an extra element with position: fixed makes Safari render it best of all. (Safari Version 9.0.1 (11601.2.7.2))

With extra fixed element: http://codepen.io/slebbo/pen/GpPRQX

Without extra fixed element: http://codepen.io/slebbo/pen/avPZxy

My google skills were no help with this one, anyone that have an answer of this behaviour. Especially with Safari, that is really funky.

Answer 1

You should be hardware accelerating elements which give these problems, in particular fixed elements need repainted on scroll. The same when you have background images set to cover and so on.

You can do this by using: backface-visibility: hidden;

or even: will-change: transform;