Webkit transform prevents redraw while animation is active

I can’t figure out of the life of me why this happens. I’m currently working on a site that uses an HTML5 audio player. Within it there’s a vu meter with an animated needle that animates while a song is currently playing.

I’ve toggle binded a class to the needle to stop/move along with the pause/play of the music. While the needle is moving, however, transitions within the music page fail to redraw. This can first be seen at: http://djswivel.com/demo/#/music/d-pryde/mars

While a track is playing, the track listing on the side does not update as you move it’s scrollbar. Pause the music and it’s back to normal. You can resume the music and experience other unpredictable results while navigating the music page.

Here are the technical details

CSS

needle.active {
    -webkit-animation: needlePoint 1s infinite;
}

@-webkit-keyframes needlePoint { /* Safari and Chrome */
    0% {
        -webkit-transform: rotate(70deg);
    }

    25% {
        -webkit-transform: rotate(90deg);
    }

    50% {
        -webkit-transform: rotate(80deg);
    }

    75% {
        -webkit-transform: rotate(90deg);
    }

    100% {
        -webkit-transform: rotate(70deg);
    }
}

I am using tinyscrollbar for most of all the scrollbars on the site. This problem cannot be replecated on the iPad as it replaces it with iscroll.

I’ve tried adding transform3d to the container of the list/scrollbar, but then it prevents the page overflow from masking anything with transform3d.

If anybody as any idea. It would be a bit help.

newest questions tagged jquery – Stack Overflow