title: IE9 + background-image (PNG24) + background-repeat + background-position = BUG
body: <p>Suppose you got a code like this:</p>
  
  <pre><code>&lt;div id="pattern"&gt; &lt;/div&gt;
  
  #pattern {
   height: 400px;    
   background: #000 url(url_to_semitransparent_png); 
   background-repeat: repeat-x;
   background-position: 100px 0;   
  }
  </code></pre>
  
  <p>It behaves as expected in every browser, but IE. In IE it looks like repeating background overlaps with itself, while it should simply stick. This issue manifested itself while we were trying to animate <code>background-position</code>. You can see the code in the fiddle: <a href="http://jsfiddle.net/Ya2AF/10/" rel="nofollow">http://jsfiddle.net/Ya2AF/10/</a> (compare IE and Chrome to witness it). Be sure to uncomment <code>animate()</code> function to get it moving.</p>
  
  <p>Has anyone encountered such behavior? Can we fight it?</p>