jQuery: box-shadow blinks when div animates on a large size screen

Question

I'm trying to animate a div

background: #fff;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); 
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);

$("#foo").animate({"top":"0px"},{duration:800});

As the div is being animated, its box-shadow starts blinking - http://jsfiddle.net/TvKqx/

Is there anything I can do to make the animation smoother?

UPDATES: I have a screen resolution of 1440 X 900 and I think that is where the problem comes from. After switching the screen resolution to 1024 X 768 the blinking is gone and the animation works fine. So how can I enhance jQuery animations on large size screen?

Answer 1

You can use CSS3 transition for larger screens - DEMO

#foo {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    position: relative;
    top: 0;

    -webkit-transition: top .8s linear;
       -moz-transition: top .8s linear;
            transition: top .8s linear;
}