Static positioning dramatically reduces performance (?)

Question

I was drawing an idea when I suddenly stumbled upon some strange rendering performance issues. I created CodePen to illustrate an idea, its navigational element, which changes from position: fixed to position: static when it “collides” with the footer. So it looks like a footer pushing it.

These are not JS buggies (I tried without JS), which slows down performance when changing the position mode. This is what I found a CSS property that makes it a lot harder for the browser to display when scrolling.

In IE10 / Firefox this works fine, in Chrome you can see in the webspectors fps-meter, which is much harder to render.

Although, the strangest of all that I have found; in Safari, it displays a lot slower. BUT adding an extra element using position: fixed does Safari the best. (Safari Version 9.0.1 (11601.2.7.2))

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

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

My Google skills have not helped anyone who has an answer to this behavior. Especially with Safari, it's really funky.

Answer 1

You must be hardware accelerating elements that give these problems, in particular, fixed elements must be redrawn on the scroll. Same thing when you have background images set, etc.

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

or even: will-change: transform;