CODEWITHSUNDEEP
csscss-transitionsinternet-explorer-10
felixthehat
felixthehat

Reputation: 847

CSS background image sprite position transition goes in different direction in IE10

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.

See a jsFiddle demo here or a video of IE10 here or see the css inline here:

.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}

Expected behaviour is for it to smoothly transition up then back down. It's like a Fill behaviour is messed up somehow?

Any help greatly appreciated!

Upvotes: 4

Views: 2475

Answers (1)

David Storey
David Storey

Reputation: 30414

It looks like a bug, where the original background-position is not being remembered correctly to transition back to, or some such.

I don't know the exact reason why IE10 is behaving that way, but you can fix it by explicitly setting the background-position to a non-zero value for the vertical offset value. For example:

.button { background-position: 0 1px; }

http://jsfiddle.net/aZqEa/22/

Upvotes: 2

Related Questions