jquery show effect shows background color while animated in Firefox 3.6

Question

The problem: I have a site that has a large image for the body background-image. This image is cached and remains constant after the first load. i.e. clicks to different pages do not reload the background. That part works fine. For really large monitors I have the body background-color set to #CCCCCC. The problem is that i have some animations going on each page load to show the content on page load, 3 divs each doing a different animation per the script below.

<script type="text/javascript">
   $(document).ready(function() {
     $("#btn").show("scale", {percent:100}, 1500);
     $("#submenu").show("fold",{},1500);
     $("#maincontent").show("drop",{},1500);
   });
</script>

As these effects are applied, outer divs that contain these animated divs are flashing the background-color, #CCCCCC.

I am currently having the most problems with FF 3.6. 3.5.8 seems to not have the problem and IE6 only flashes it very quickly.

Any help would be much appreciated. I'm using jquery-ui 1.7.2 with jquery 1.3.2 and also tried it with 1.4.2.

Thanks,

Dave

Answer 1

I have the same animation problem with firefox 3.6.8.

It shows the background color although the page has a background image.

With Google Chrome it works fine.