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;
      -webkit-transition: left, 0.75s, ease-in-out;
    }

    #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
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;
      -webkit-transition: left, 0.75s, ease-in-out;
    }

    #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