Weird rendering bug in desktop webkit (safari/chrome) with absolutely positioned elements

If you look at the video here: http://f.cl.ly/items/2g1a2B3G312D0x0G353W/Render%20Bug%202.mov - you will see the problem in action. Basically, I have something along the following: ``` <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 is absolutely positioned, like this: ``` #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; } ``` I have the following jQuery: ``` $("#tab").click(function(){ $("#sidenav").toggleClass("hidden"); }); ``` 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 `<li>`'s. Keep in mind, this only happens in Safari/Chrome on the desktop. Safari on the iPad and Firefox on the desktop are working fine. Thanks! Andrew EDIT WITH FIX: 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!