IE 9 Resets Background-position When Hover (IE Bug?)

I can't bealieve i found something that works both in IE8 and IE7 but fails in IE9. Here is the page i was working on: [Link to the site][1]. Notice how in IE9, on the side menu wh

Solution 1:

Might I suggest the following CSS-only solution?

#nav_bar li {
    /* whatever you need for the background image */
    background-position: -224px 0;
    transition: background-position 0.55s ease;
    -webkit-transition: background-position 0.55s ease;
}
#nav_bar li:hover {
    background-position: -20px 0;
}

If you really want it to work in IE9 and below (since it does work fine in IE10), try animating backgroundPosition itself, rather than its component properties.

$("#nav_bar li")
 .css({backgroundPosition:"-224px 0"})
 .hover(
  function() {$(this).stop().animate({backgroundPosition:"-20px 0"},{duration:550});},
  function() {$(this).stop().animate({backgroundPosition:"-224px 0"},{duration:550});}
 );