jQuery fades painfully slow on IE8

Question

Hi! I am using jQuery cycle and also a fade in/out on this site:

http://www.lunatestsite.co.uk

Cycle for the banner, fades on hover for the bottom nav buttons. In anything but IE8, all is peachy, but IE8 has incredibly jerky fades.

There is mention of IE8 having a different method of animating transparency on:

http://stackoverflow.com/questions/1015395/ie8-jquery-fadeto

It seems hard to believe IE6 implements this fine but the latest and greatest fails. I've seen mention of relative/absolute positioned elements having problems with fades, but that doesn't explain the floated banner.

Does IE8 suck, or my code? Any opinions / ideas gratefully welcomed! Thanks

Answer 1

It lookst as if it ist a problem on IE 8, as I had a similar behaviour, on one of my systems. I resolved to using a different animaiton, which in my case was no problem.

Answer 2

Its your photo background. Replace the banner portion with a white background for IE8 and it will fade smoothly, and make sure you send the finger to the IE team in the conditional comment.

Edit: it seems that only making the bg white behind the banner won't do it. I only get a smooth transition removing the background IMG tag you have (not the body background-image)

Edit2: final test, putting the image in the class="bg" img tag as a normal block element with a background-image fixed it too. So we can conclude that having the floating image in the back is bad for IE8, use a normal div with a background IMO. If you need to stretch the image to fit the page we would need to think another solution, or have only IE8 not stretch.