jquery animate (height) causes background-image flickering in firefox

Question

I have a little Problem using jQuery.animate with firefox: when i animate the height of a container with some background image, the background starts to flicker on firefox only - all other browsers (even ie) show a smooth animation. a reduced code snippet that shows what i do:

<div style="background-image:url(image.jpg);background-position:50% 50%;height:200px;"
      onmouseover="jQuery(this).animate({height:400});"></div>

I would greatly appreciate your help.

Answer 1

Out of interest, what happens if you wrap that in another DIV and animate that, e.g.

<div style="background-position:50% 50%;height:200px;" onmouseover="jQuery(this).animate({height:400});">
     <div style="background-image:url(image.jpg);"></div>
</div>

(For the record, I've used your code, but would have preferred using CSS Classes and Late jQuery event binding ;-)