0

Try hovering over the "Cancel" button in Internet Explorer 8:

http://jsfiddle.net/HYDKa/

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!

Nick
  • 8,049
  • 18
  • 63
  • 107

2 Answers2

0

old internet explorer versions wont accept CSS values without 'px'. example= width:10px;

so you need to add + 'px' at the end of animate values.

Here is working jsfiddle

    $(this).find('.sliding_link_image').animate({
        'backgroundPosition': (sliding_link_original_background_position + 10) + 'px'//<--here
    }, 150);
}, function() {
    $(this).find('.sliding_link_image').animate({
        'backgroundPosition': sliding_link_original_background_position + 'px'//<--and here
    }, 150);
Barlas Apaydin
  • 7,233
  • 11
  • 55
  • 86
  • It looks like the bug is still there. Did you try your code in Internet Explorer 8? – Nick Jul 07 '12 at 02:42
  • I just now tried your link again in IE 8 and it definitely doesn't work. Remember that the bug only happens the first time you hover over the buttons. After that, they work normally. If you're certain that your link works in IE 8, may I ask which version of Windows you're running? – Nick Jul 07 '12 at 14:33
  • windows 7.. http://stackoverflow.com/questions/11200515/jquery-sliding-boxes-not-working-in-ie8/11203650#11203650 read comments mate, same problem here too.. maybe ur browser is bugged /: – Barlas Apaydin Jul 07 '12 at 14:48
  • [Here](http://i.imgur.com/BKa8i.png) is a screenshot of your code not working in IE 8 on Windows XP. I've also tried it in IE 8 on Windows 7 and it didn't work in that environment either. – Nick Jul 09 '12 at 16:24
  • m8 ur os is really old /: sorry coudnt help :// – Barlas Apaydin Jul 09 '12 at 20:00
  • mate i guess; your os or your ie, is bugged .. cuz its just working fine on my computer.. this is screenshot on ie7 = http://i.imgur.com/ZBZNq.jpg – Barlas Apaydin Jul 10 '12 at 08:28
  • Thanks for the screenshot. IE 9 emulating IE 7 is not the same as IE 7. See [here](http://webmasters.stackexchange.com/questions/10865/how-can-i-test-my-web-site-in-ie6-ie7-ie8-and-ie9#comment22637_10876), [here](http://stackoverflow.com/questions/10249454/how-well-does-ie7-8-mode-in-ie9-compare-to-actually-running-ie7-8) and [here](http://www.sitepoint.com/forums/showthread.php?707108-IE9-Beta-How-Accurate-is-IE7-IE8-Emulation&s=7727dfed209d8303df7ec6c08965ccdc&p=4716641&viewfull=1#post4716641). I will keep looking for a solution. Thanks so much for your time! – Nick Jul 10 '12 at 15:49
0

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!

Community
  • 1
  • 1
Nick
  • 8,049
  • 18
  • 63
  • 107