Sonderbarer Rendering-Bug im Desktop-Webkit (Safari / Chrome) mit absolut positionierten Elementen

Wenn dir das video anschauen hier: http://f.cl.ly/items/2g1a2B3G312D0x0G353W/Render%20Bug%202.mov - sehen Sie das problem in Aktion. Im Grunde, habe ich etwas, entlang der folgenden:

<section id="sidenav">
  <h1>TEXT HERE</h1>
  <ul>
    <li>Tab One</li>
    <li>Tab Two</li>
    <li>Tab Three</li>
    <li>Tab Four</li>
  </ul>
  <div id="tab"></div>
</section>

Sidenav ist absolut positioniert, wie diese:

#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;
}

Ich habe die folgende jQuery:

$("#tab").click(function(){
  $("#sidenav").toggleClass("hidden");
});

Jedoch die Elemente innerhalb des Abschnitts sind nicht zu halten mit der animation. Immer, wenn ich Sie, entweder Sie zurückbleiben oder sich nicht zu bewegen. Jedoch, Sie sind nur Geister, ich kann nicht klicken Sie auf Sie. Wenn ich die Seite nav zurück, Sie in der Regel aufholen, aber manchmal sind Sie unterbrochen, bis ich den Mauszeiger über den <li>'s.

Beachten Sie, das passiert nur in Safari/Chrome auf dem desktop. Safari auf dem iPad und Firefox auf dem desktop funktionieren.

Dank!
Andrew

---

BEARBEITEN MIT UPDATE:

Also scheinbar hinzufügen z-index: 10 (oder eines z-Indexes) der sidenav-element das problem behoben. Einige Personen wurden gefragt, für die Gesamtheit der meine css, also bearbeitete ich die post enthalten. Ich bin mir nicht ganz sicher, warum z-index behoben, und ich würde gerne wissen, warum. Ich bin immer noch mit meinem Kopfgeld zu wem auch immer, erklären kann dass. Danke!

InformationsquelleAutor der Frage andrewpthorp | 2012-05-09