Using jquery to animate a div to the top a page, but it flickers in Chrome

Question

I am using jquery to animate a div to the top a page, but for some reason it flickers realllll bad when viewing this in chrome. Here is an overly simplified version of what I mean. Any way to avoid this flickering?

http://jsfiddle.net/WzhY9/

Answer 1

I ran the example you provided and it doesn't flicker for me however as a suggestion you can force Hardware acceleration on your load_bar element.

#load_bar { 
    height:10px; 
    position:absolute;
    background:black; 
    right: 0; 
    top: 400px; 
    width: 300px;

    /* Force hardware acceleration */
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;

}

Please note that this will only work with webkit browsers (because of the -webkit- prefix) you can add the others to support other browsers.

I hope this helps.