Having an odd week this week.
While viewing a client’s site today in Firefox 10 I noticed that the crossfade on the site, loaded just before Christmas, wasn’t quite right – the images should crossfade into one another (using this script), but what happened was the image faded to black and then the next image appeared. I observed the same effect on the malsup cycle plugin, used elsewhere on the site.
Now the same script works fine in Opera 11 and Chrome, and it works fine in Firefox 10 on my demo page listed above. So what’s the difference? The only difference is that one image has a border, and one doesn’t. Add the border and the crossfade works fine, take it away and it doesn’t. Here’s a cut down illustration – the left hand image has a border and fades to transparent, the right hand image has no border and fades to black then transparent.
Having checked a couple of other sites I’ve built, if the image is wrapped in div, all seems to be OK as well, it’s just an issue with images.
This is only an issue in Firefox 10 as far as I can see. FF9 is fine.
I’ve logged this as a bug with jQuery. If you’ve come across the same issue please leave a comment below, or, if you’ve got a spare second and Firefox 10, have a look at the test page and let me know if you see the same thing. Apparently it’s OK on Mac/OS X. I’m on W7 Pro 64-bit.
Update 10 February Thanks to Oblik for the updates below – this is reported as a Firefox bug as well. It also seems that applying background-color to the image also solves the problem. I’ve further noted that this does not affect a different machine running W7 Home with FF10 – the links suggest it may be related to the graphics card.
Update 18 February This looks like it’s mostly likely to get resolved by a Firefox update to me. I’ve noticed the problem today on another couple of sites. It’s now being logged under this ticket.
Update 24 April Still not fixed in FF11…I’ve noticed the problem a lot on a wide variety of sites. Looks like it might be scheduled for a fix in FF13.
Update 20 June Fixed in FF13!!
Tags: Firefox 10, jQuery
Setting a background-color solved the problem for me. Excellent find !
‘background-color’ doesn’t help anything on my affected sites, but ‘border’ does. You can also use ‘outline’ since it has no influence on the element’s dimension. I do it this way: ‘outline: 1px solid transparent’ (yes, you can set a border color or outline color to ‘transparent’!)
I’ve see this happen on rotating banners on two of my sites using jquery cross-fades, but only when viewed in Firefox 10 (and XP SP3 also.) No problems on other browsers.
Thanks for posting. You saved me hours!
Hi Simon, I just noticed this bug today in all my jQuery slideshows. Several hours of testing did not reveal any obvious cause… the only thing I could suspect was the recent update to FF10. Your suggestion to apply “background-color” did the trick. Saved my day. Thx Ian
It’s seem to be a firefox bug
https://bugzilla.mozilla.org/show_bug.cgi?id=723524
Thanks Oblik, I was beginning to think it was just me.
I’ve the same problem.
Windows XP SP3 with FF10.