title: Why is Firefox so slow with a setTimeout animation?
body: <p>Ok, so I have a small animation of snowflakes falling on the screen, and I used <code>setTimeout</code> to make it move. I love the way it looks so far (on Chrome at least), and right now, I'm working on cross-compatibility, and I'm looking at Firefox, and it's moving extremely slow. To be honest, the <code>setTimeout</code> function is set to 5ms, and it only moves 1px every 5 ms (a speed of 200 fps), but I need it to go at that speed. Is there some sly hack to get around it, and what speed is Firefox making the function repeat at? Also, side-note: it doesn't even work in IE9 (I don't care about &lt;8). They moves for a second, hits the bottom of the screen, and then just stops (I want it to restart at the top).<br>
  Any help will be greatly appreciated!</p>
  
  <p>My code (if you want to wade through it) if you don't skip to <code>"//begin actual function"</code>: </p>
  
  <pre><code>var width = window.outerWidth;  
  var height = window.outerHeight;  
  //foreground  
  var curWidth = width - 90;  
  var h2 = height * 5;  
  var tbvar;  
  function TB() {  
  //random flake  
  var flakeSrc = ['images/1.png','images/2.png','images/3.png','images/4.png'];  
  var randImg1 = Math.floor(Math.random() * flakeSrc.length );  
  var randImg2 = Math.floor(Math.random() * flakeSrc.length );  
  var randImg3 = Math.floor(Math.random() * flakeSrc.length );  
  var randImg4 = Math.floor(Math.random() * flakeSrc.length );  
  var randImg5 = Math.floor(Math.random() * flakeSrc.length );  
  //random horizontal position array  
  var left = [];  
  var one = 1;  
  do {  
          one++;  
          left.push(one)  
      }  
      while (one &lt;= curWidth);  
      var rand1 = Math.floor(Math.random() * left.length );  
      var rand2 = Math.floor(Math.random() * left.length );  
      var rand3 = Math.floor(Math.random() * left.length );  
      var rand4 = Math.floor(Math.random() * left.length );  
      var rand5 = Math.floor(Math.random() * left.length );  
      //////////////begin actual function/////////////////////////////////////////////  
      clearTimeout(tbvar);  
      tbvar=setTimeout(function(){  
          //find top positions  
          var top1 = document.getElementById("flake1").offsetTop;  
          var top2 = document.getElementById("flake2").offsetTop;  
          var top3 = document.getElementById("flake3").offsetTop;  
          var top4 = document.getElementById("flake4").offsetTop;  
          var top5 = document.getElementById("flake5").offsetTop;  
          //add 1  
          top1++;  
          top2++;  
          top3++;  
          top4++;  
          top5++;  
          //change top positions  
          document.getElementById("flake1").style.top = top1 + "px";  
          document.getElementById("flake2").style.top = top2 + "px";  
          document.getElementById("flake3").style.top = top3 + "px";  
          document.getElementById("flake4").style.top = top4 + "px";  
          document.getElementById("flake5").style.top = top5 + "px";  
          //end of screen statements  
          if (top1 == height) {  
              //top1 == "-180px";  
              document.getElementById("flake1").style.top = "-180px";  
              document.getElementById("flake1").style.left = rand1 + "px";  
              document.getElementById('flake1').src = flakeSrc[randImg1];  
          }  
          if (top2 == height) {  
              //top2 == "-180px";  
              document.getElementById("flake2").style.top = "-180px";  
              document.getElementById("flake2").style.left = rand2 + "px";  
              document.getElementById('flake2').src = flakeSrc[randImg2];  
          }  
          if (top3 == height) {  
              //top3 == "-180px";  
              document.getElementById("flake3").style.top = "-180px";  
              document.getElementById("flake3").style.left = rand3 + "px";  
              document.getElementById('flake3').src = flakeSrc[randImg3];  
          }  
          if (top4 == height) {  
              //top4 == "-180px";  
              document.getElementById("flake4").style.top = "-180px";  
              document.getElementById("flake4").style.left = rand4 + "px";  
              document.getElementById('flake4').src = flakeSrc[randImg4];  
          }  
          if (top5 == height) {  
              //top5 == "-180px";  
              document.getElementById("flake5").style.top = "-180px";  
              document.getElementById("flake5").style.left = rand5 + "px";  
              document.getElementById('flake5').src = flakeSrc[randImg5];  
          }  
          TB();  
      }, 5);  
  }  
  TB();  
  </code></pre>
  
  <p>If you wanna see the whole project in action: <a href="http://fudgepants.com/snow/snow.html" rel="nofollow">http://fudgepants.com/snow/snow.html</a>  </p>
  
  <p>The part I'm talking about is the large snowflakes, not the tiny ones.<br>
  Thanks!</p>