title: CSS background image sprite position transition goes in different direction in IE10
body: <p>I'm creating a link button with a background image sprite, that transitions on :hover. It works great in all browsers except for IE, which seems to reset the transition direction.</p>
  
  <p><a href="http://jsfiddle.net/aZqEa/4" rel="nofollow">See a jsFiddle demo here</a> or a <a href="http://screencast.com/t/FD4jvGu9rWSo" rel="nofollow">video of IE10 here</a> or see the css inline here:</p>
  
  <pre><code>.button {
    background:url('http://blackspike.com/temp/icon-github.svg') 0 0 no-repeat; width: 30px; height: 30px; display: block; 
    -webkit-transition: background-position 0.3s ease; 
    -moz-transition: background-position 0.3s ease; 
    -ms-transition: background-position 0.3s ease; 
    transition: background-position 0.3s ease; 
  }
  
  .button:hover {background-position: 0 -30px}
  </code></pre>
  
  <p>Expected behaviour is for it to smoothly transition up then back down. It's like a Fill behaviour is messed up somehow?</p>
  
  <p>Any help greatly appreciated!</p>