title: Mobile safari position:fixed z-index glitch when scrolling
body: <p>I know iPhones used to <em>not</em> support position:fixed, but now it does and I'm seeing a weird glitch when I scroll a fixed position element behind other elements with higher z-index. The fixed positions element with the lower z-index appears in front momentarily, which looks really bad. Is there a way to prevent this?</p>
  
  <p>I tried adding <code>-webkit-transform: translate3d(0, 0, 0);</code> to the fixed element and it doesn't seem to help this problem.</p>
  
  <p><a href="http://jsfiddle.net/6Cj8H/">Here is a jsfiddle as well.</a></p>
  
  <p><strong>Update</strong>
  I added <code>transform:translateZ(x)</code> in addition to the z-index and it did not fix the problem.</p>
  
  <p><strong>Update2</strong>
  I added <code>-webkit</code> prefix and this DOES fix the z-index problem on an mobile Safari, but also causes the position:fixed to work incorrectly in desktop Chrome. </p>