I would contact the Firefox developers, via their bug-tracking application. It's open source, and if they consider this behavior an error, it might be corrected in the future. In the mean time, maybe they have an alternative for you.
Did you already test Opera and Safari? Those might work or they might not. You only know if you tried.
Hope this helps.
Kees
I'm using a javascript "slide" function to move a <div> layer in 10 pixel increments from one location on a page to another. The layer contains a GIF image. It's basically a side panel that flies out when you click a button. The button is an invisible GIF with an anchor that calls slide() onClick.
The animation works fine in IE but in Firefox I'm getting a series of afterimages as the function moves the layer to the goal. The image is painted in the new position each time but the previous position is also shown and doesn't disappear right away. The movement looks jumpy. It also runs very slowly compared to IE.
Has anyone had this problem and is there a workaround for fix for this?
***SAMPLE CODE BELOW*****
<html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<title>cn_shell</title>
<script language="JavaScript" type="text/JavaScript">
<!-- These are vars used in the Slide function-->
var layername, xgoal, xhop, delay=5;
<!-- This function handles browser syntax differences-->
function makeName(layerID) {
if (navigator.appName=="Mozilla")
{ refname = eval("document." + layerID) }
else
{ refname = eval("document.all." + layerID + ".style") }
return refname
}
<!--The slide function moves the object-->
function slide() {
if ((parseInt(layername.left) != xgoal))
{ layername.left = parseInt(layername.left) + xhop;
window.setTimeout("slide()", delay) }
}
</script>
</head>
<body>
<!--button layer needs to be above tab layers **************************************************************** -->
<div id="buttons" style="position:absolute; width:60px; height:488px; z-index:30; left: 340px; top: 82px;">
<div id="bTab1Out" style="position:absolute; width:16px; height:100px; z-index:31; left: 3px; top: 7px; background-color: #99CCCC; layer-background-color: #99CCCC; border: 1px;"> <a href="#" OnClick="layername=makeName('tab1');xhop=-10; xgoal=410; slide()"> <img src= "emptyButton.gif" width="16" height="100" border="0" ></a> </div>
<div id="bTab2Out" style="position:absolute; width:16px; height:60px; z-index:31; left: 3px; top: 127px; background-color: #99CCCC; layer-background-color: #99CCCC; border: 1px;"> <a href="#" OnClick="layername=makeName('tab2');xhop=-10; xgoal=410; slide()"> <img src= "emptyButton.gif" width="16" height="60" border="0" ></a> </div>
<div id="bTab3Out" style="position:absolute; width:16px; height:50px; z-index:31; left: 3px; top: 211px; background-color: #99CCCC; layer-background-color: #99CCCC; border: 1px;"> <a href="#" OnClick="layername=makeName('tab3');xhop=-10; xgoal=410; slide()"> <img src= "emptyButton.gif" width="16" height="50" border="0" ></a> </div>
<div id="bTab1In" style="position:absolute; width:16px; height:100px; z-index:31; left: 33px; top: 7px; background-color: #FFCC99; layer-background-color: #FFCC99; border: 1px;"> <a href="#" OnClick="layername=makeName('tab1');xhop=10; xgoal=780; slide()"> <img src= "emptyButton.gif" width="16" height="100" border="0" ></a> </div>
<div id="bTab2In" style="position:absolute; width:16px; height:60px; z-index:31; left: 33px; top: 127px; background-color: #FFCC99; layer-background-color: #FFCC99; border: 1px;"> <a href="#" OnClick="layername=makeName('tab2');xhop=10; xgoal=780; slide()"> <img src= "emptyButton.gif" width="16" height="60" border="0" ></a> </div>
<div id="bTab3In" style="position:absolute; width:16px; height:50px; z-index:31; left: 33px; top: 211px; background-color: #FFCC99; layer-background-color: #FFCC99; border: 1px;"> <a href="#" OnClick="layername=makeName('tab3');xhop=10; xgoal=780; slide()"> <img src= "emptyButton.gif" width="16" height="50" border="0" ></a> </div>
</div>
<!--TAB 1 START **************************************************************** -->
<div id="tab1" style="position:absolute; width:390px; height:488px; z-index:25; left: 780px; top: 82px;"> <img src= "minfo-tab-in.gif" width="390" height="488" name="minfo-tab-in">
<div id="moreInfoContent" style="position:absolute; width:360px; height:480px; z-index:21; left: 25px; top: 5px; overflow: auto; visibility: hidden;">This is more information</div>
</div>
<!--TAB 1 END **************************************************************** -->
<!--TAB 2 START **************************************************************** -->
<div id="tab2" style="position:absolute; width:390px; height:488px; z-index:20; left: 780px; top: 82px;"> <img src= "glossary-tab-in.gif" width="390" height="488" name="glossary-tab-in">
<div id="moreInfoContent" style="position:absolute; width:360px; height:480px; z-index:21; left: 25px; top: 5px; overflow: auto; visibility: hidden;">This is a glossary</div>
</div>
<!--TAB 2 END **************************************************************** -->
<!--TAB 3 START **************************************************************** -->
<div id="tab3" style="position:absolute; width:390px; height:488px; z-index:15; left: 780px; top: 82px;"> <img src= "help-tab-in.gif" width="390" height="488" name="help-tab-in">
<div id="moreInfoContent" style="position:absolute; width:360px; height:480px; z-index:21; left: 25px; top: 5px; overflow: auto; visibility: hidden;">This is help information.</div>
</div>
<!--TAB 3 END **************************************************************** -->
</body>
</html>

Chowhound
Comic Vine
GameFAQs
GameSpot
Giant Bomb
TechRepublic