title: Javascript horizontally scrolling gallery, scrollLeft unusable in IE9 and stops with chrome
body: <p>I have some issues with my horizontally scrolling image gallery.
  To scroll it I use the javascript scrollLeft method and recall the function with a timer (setTimeout). After reaching the end of the scrollbar I set it to the beginning.</p>
  
  <p>It works fine on a single-core AMD Athlon 64 3000+. (windows xp FF15 &amp; IE8)
  Also it works on an old laptop with pentium m running at 600mhz. (windows xp FF15) 
  On my quadcore it is smooth as icecream, but on the high end machine of my boss it is choppy and slow. (thus it is the developers fault :D and I have to fix it.) - But how?
  It also could be a bit faster on a Intel T1300 (what a sucky cpu)</p>
  
  <p>I suppose there is something miss with my boss rig, but I would appreciate hints how to make my script generally faster.</p>
  
  <p>But there are some addidional oddities:
  It works with Firefox 14 &amp; 15 and with IE8. But with IE9 is scrolls extremely slow making it unusable.
  And with Chrome it wont resume after the onmouseover event, that pauses the gallery.
  The Onmouseout is not fired as chrome does not recognize it?</p>
  
  <p>I made a fiddle here: <a href="http://jsfiddle.net/cQf44/7/" rel="nofollow">http://jsfiddle.net/cQf44/7/</a>
  (In the original code the images are additionally nested in a DIV each, which I might change) </p>
  
  <p>Heres the example I made for this problem.</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;&lt;/title&gt;
              &lt;style type="text/css"&gt;
          html
      {
          height:100%;
      }
  
      body
      {
          height:98%;
          background-color: #FFF9E5;    
          padding: 0px;                                
      }   
  
  #wrapper
  {
      margin:auto;
      padding: 0;
  }
  #outer
  {
      padding: 0;
      background-color: #FFF9E5;
  }
  
  #container
  {
      margin: 0 auto;   
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      width:60%;
      background-color: #867F27;
      padding-right:1%;
      padding-left:1%;
  }
  
  #view
  {   
      height: 180px;
      white-space: nowrap;
      line-height: 0;
      overflow-x: auto;
      margin: 0 auto;
      vertical-align: middle;
      width:800px;    /*with a fixed width it works very nice*/
      max-width: 75%; /*lets the gallery shrink on resize of the browser*/
  }    
  
  img
  {
          display: inline-block;
  }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="wrapper"&gt;
          &lt;div id="outer"&gt;
              &lt;div id="container"&gt;
                  &lt;div id="view" onmouseover="javascript:stop_scroll()" onmouseleave="javascript:start_scroll()"&gt;
                      &lt;img src="http://lorempixel.com/205/154/"/&gt;
                      &lt;img src="http://lorempixel.com/205/154/"/&gt;
                      &lt;img src="http://lorempixel.com/205/154/"/&gt;
                      &lt;img src="http://lorempixel.com/205/154/"/&gt;
                      &lt;img src="http://lorempixel.com/205/154/"/&gt;
                      &lt;img src="http://lorempixel.com/205/154/"/&gt;
                      &lt;img src="http://lorempixel.com/205/154/"/&gt;
                      &lt;img src="http://lorempixel.com/205/154/"/&gt;
                      &lt;img src="http://lorempixel.com/205/154/"/&gt;
                      &lt;img src="http://lorempixel.com/205/154/"/&gt;
                      &lt;img src="http://lorempixel.com/205/154/"/&gt;
                      &lt;img src="http://lorempixel.com/205/154/"/&gt;
                      &lt;img src="http://lorempixel.com/205/154/"/&gt;
                      &lt;img src="http://lorempixel.com/205/154/"/&gt;
                      &lt;img src="http://lorempixel.com/205/154/"/&gt;
                      &lt;img src="http://lorempixel.com/205/154/"/&gt;
                      &lt;img src="http://lorempixel.com/205/154/"/&gt;
                      &lt;img src="http://lorempixel.com/205/154/"/&gt;
                      &lt;img src="http://lorempixel.com/205/154/"/&gt;
                      &lt;img src="http://lorempixel.com/205/154/"/&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
  var gallery = document.getElementById('view');
  var scroll_timer;
  
  autoscroll();
  function autoscroll()
  {
      scroll_timer=setTimeout("autoscroll()",10);    
      var max_scroll = parseInt(gallery.scrollWidth)-parseInt(gallery.clientWidth);
      gallery.scrollLeft += 1;
      if(gallery.scrollLeft == max_scroll)
      {
          gallery.scrollLeft = 0;
      }
  }
  
  function stop_scroll()
  {
      clearTimeout(scroll_timer);
  }
  
  function start_scroll()
  {
      scroll_timer=setTimeout("autoscroll()",10);
  }
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>as always thanks in advance and have a nice day.</p>