Try hovering over the “Cancel” button in Internet Explorer 8:
You’ll notice that the first time you hover over it, it jumps and you can see the “OK” button, but then it corrects itself. Subsequent hovers function normally, though.
Please note that this bug also occurs with the “OK” button; it’s just more obvious with the “Cancel” button. Also, this bug is present in IE 6 and 7, but the demo I’ve provided won’t work since the image is Base64 encoded.
The code works fine in non-IE browsers, of course.
Is this a jQuery bug? Is there anything I can do to work around it besides splitting the images up? I could include a stylesheet for IE < 9, but I’d rather not if I don’t have to.
Thanks!
After reading this, I ended up resolving my issue by changing “backgroundPosition” to “background-position-x”. Also, since some browsers don’t support “background-position-x”, I created CSS3 transitions to do the same thing and then wrapped the JavaScript code in an if statement so that it only runs if the browser doesn’t support CSS3 transitions. I wasn’t using feature detection anywhere else on my website and I didn’t want to bother with Modernizr for such a simple thing, so I used the function shown here. One other thing I should note is that I didn’t end up needing to bother with the “sliding_link_original_background_position” variable at all.
I appreciate barlasapaydin’s time as well as the time of anybody else who read this. Thank you!