title: Weird rendering bug in desktop webkit (safari/chrome) with absolutely positioned elements
body: <p>If you look at the video here: <a href="http://f.cl.ly/items/2g1a2B3G312D0x0G353W/Render%20Bug%202.mov" rel="noreferrer">http://f.cl.ly/items/2g1a2B3G312D0x0G353W/Render%20Bug%202.mov</a> - you will see the problem in action. Basically, I have something along the following:</p>
  
  <pre><code>&lt;section id="sidenav"&gt;
    &lt;h1&gt;TEXT HERE&lt;/h1&gt;
    &lt;ul&gt;
      &lt;li&gt;Tab One&lt;/li&gt;
      &lt;li&gt;Tab Two&lt;/li&gt;
      &lt;li&gt;Tab Three&lt;/li&gt;
      &lt;li&gt;Tab Four&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div id="tab"&gt;&lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>Sidenav is absolutely positioned, like this:</p>
  
  <pre><code>#sidenav {
    position: absolute;
    top: 200px;
    left: 0px;
    width: 770px;
    padding: 30px 0px 20px;
    background: rgba(255, 255, 255, 0.85);
    -webkit-transition: left 0.75s ease-in-out;
    -webkit-backface-visibility: hidden;
    z-index: 10; /* This fixed it. */
  }
  
  #sidenav.hidden {
    left: -768px;
  }
  </code></pre>
  
  <p>I have the following jQuery:</p>
  
  <pre><code>$("#tab").click(function(){
    $("#sidenav").toggleClass("hidden");
  });
  </code></pre>
  
  <p>However, the elements inside of the section aren't keeping up with the animation. Whenever I click, they either lag behind or don't move at all. However, they are just ghosts, I can't click them. When I bring the side nav back out, they usually catch up, but sometimes they are broken until I hover over the <code>&lt;li&gt;</code>'s.</p>
  
  <p>Keep in mind, this only happens in Safari/Chrome on the desktop. Safari on the iPad and Firefox on the desktop are working fine.</p>
  
  <p>Thanks!
  Andrew</p>
  
  <hr>
  
  <p><strong>EDIT WITH FIX:</strong></p>
  
  <p>So apparently adding z-index: 10 (or any z-index) to the sidenav element fixed the problem. Some people were asking for the entirety of my css, so I edited the post to contain it. I'm not sure exactly why z-index fixed this, and I'd love to know why. I'm still offering my bounty to whomever can explain that. Thanks!</p>