title: Static positioning drastically slows performance (?)
body: <p>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 <code>position: fixed</code> to <code>position: static</code> when it "collides" with the footer. So it looks like the footer pushing it up. </p>
  
  <p>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.</p>
  
  <p>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. </p>
  
  <p>Although, the weirdest of all I found; in Safari, it's <strong>a lot</strong> slower to render. <strong>BUT</strong> adding an extra element with <code>position: fixed</code> makes Safari render it best of all. <em>(Safari Version 9.0.1 (11601.2.7.2))</em></p>
  
  <p>With extra fixed element: <a href="http://codepen.io/slebbo/pen/GpPRQX" rel="noreferrer">http://codepen.io/slebbo/pen/GpPRQX</a></p>
  
  <p>Without extra fixed element: <a href="http://codepen.io/slebbo/pen/avPZxy" rel="noreferrer">http://codepen.io/slebbo/pen/avPZxy</a></p>
  
  <p>My google skills were no help with this one, anyone that have an answer of this behaviour. Especially with Safari, that is really funky.</p>