problem with fade in script - need help

[jgrayson]

i just recently noticed a weird behavior in IE (both IE6 and IE7) with the fade in script that's causing white specs to appear on some of my images. this is what it's doing to some of my images:


i currently have the script turned off because for the life of me i can't figure out why it's happening (other then the fact that IE sucks because the image itself doesn't have the white specs and it's not happening. my guess is that the white pixels are actually transparent pixels because the color that is showing through is actually the color of the BG behind the photo itself. it seems that only the darkest pixels are remaining transparent.

this is the script code i'm using:

document.write("<style type='text/css'>#photo2 {visibility:hidden;}</style>");

function initImage() {
	imageId = 'photo2';
	imgobj = document.getElementById(imageId);
	setOpacity(imgobj, 0);
	imgobj.style.visibility = 'visible';
	fadeIn(imageId,0);
}
function fadeIn(objId,opacity) {
	if (document.getElementById) {
		obj = document.getElementById(objId);
		if (opacity <= 100) {
			setOpacity(obj, opacity);
			opacity += 10;
			window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
		}
	}
}
function setOpacity(obj, opacity) {
	opacity = (opacity == 100)?99.999:opacity;
  
	// IE/Win
	obj.style.filter = "alpha(opacity:"+opacity+")";
  
	// Safari<1.2, Konqueror
	obj.style.KHTMLOpacity = opacity/100;
  
	// Older Mozilla and Firefox
	obj.style.MozOpacity = opacity/100;
  
	// Safari 1.2, newer Firefox and Mozilla, CSS3
	obj.style.opacity = opacity/100;
}
window.onload = function() {initImage()}

this is the img scr code on the photo:

<img src="images/xxxxx.jpg" id="photo2" />

and the css for photo2 in my stylesheet is currently empty:

#photo2 { }

i would love more then anything is someone here could help me figure this out. i will turn on the script if you need me to.

[austriaka+]

I had this problem as well wenn creating the "secret image addon". The alpha filter used for IE produces somewhat like a loss of black pixels. For this reason the addon has the option to use it without the fade effect.

I did a hard work searching for that issue at google, but I didn't find any clues. As far as I can imagine (but I do not know if this is correct), it has something to do with the alpha filter. Alpha filters work on RGB-Pixels and do something with them. For me it looks like if completly black pixels (full R,G,B) are wiped away by the filter because of a calculating bug of the filter.
But I cannot tell if this is true and why it doesn't appear on all images. Perhaps it has a reason in image processing? Is Photoshop doing something with the black pixels, what alpha filter of IE doesn't like?

Sorry I cannot help you, just tell you you are not the only one with this problem

KArin

[m i k e b]

I had to disable transparency on my mootools effects on my site in order to "bandaid" this issue. I have yet to find a solution. For now I will just have to use effects that do not do alpha transparency.

[Dkozikowski+]

jgrayson, I'm sorry and I am unable to help you with your transparency issues but I just wanted to chime in here and let Mike know how beautiful his template design is. So simple and it has neat functionality!

I hope you consider releasing it for download someday

Cheers!

[m i k e b]

dwilkinsjr, thanks. if there was enough of a request i would consider. i am using your stat addon and appreciate your work as well.

jgrayson, i am still looking into it.

[dakwegmo+]

Originally Posted by m i k e b

dwilkinsjr, thanks. if there was enough of a request i would consider.

Put me on the list of those interested in seeing your template released publicly.

[jgrayson]

thanks to everyone who chimed in.... i thought it might be an issue specific to me until i found a few people with similar alpha/transparency issues with IE as well. i was a bit annoyed because i just recently discovered the issue (i'm a web designer and i should have discovered this issue). i mostly use macs and just test on PCs and the pc i test on never showed this issue in IE6. i just installed parallels on my mac which allows me to run windows on my mac at the same time the mac os is running and noticed the issue in IE6. i then started seeing the issue on my test pc after it updated to IE7. i was pulling my hairs out because all the photos that were showing the effects were photos added to my photoblog after i had bought a new computer and thought possibly something was happening on my end with my set up.

oh well, the easiest solution was to just turn off the script... that's a lot easier then to convince millions of people to stop using inferior browsers like IE

[Bloke]

Originally Posted by jgrayson

i thought it might be an issue specific to me until i found a few people with similar alpha/transparency issues with IE as well.

You're definitely not the only one. Look at, primarily, image 15 on this page in IE 6 or 7 (or even in the IE Tabs extension to Firefox) : yuk! And I thought IE7 was supposed to support proper transparency?! It's been in dev long enough...

I did a test by maxing out the Curves tool in Photoshop and overlaying it with the actual rendered image from IE and the proper image. The pixels that IE helpfully replaced for me don't appear to be the very darkest ones, as I'd originally thought. It's close (#02050a) but not black.

I figured it might have been the fact that a png/gif was being overlaid over a jpg in the Slimbox code, but from the responses here it seems it's a mootools/fading function that's setting IE's bugged opacity filter. That's good to know so I can hone my testing to try and find a solution; many thanks. If anyone has any more pointers or fixes/kludges, I'm all, ermm, eyes.

BTW, in most of the other pictures I've managed to edit out that bogus colour through judicial use of the smudge/blur/clone stamp tools :-) But I'm sure as hell not going to attempt that on image 15! Maybe the colour replacement tool though...

[owen-b]

Is there a way to disable the effect on just IE, and leave it on for the people that use the infinitely superior browsers?

Also, any idea how the moodaholic fella doesn't have this problem?

[austriaka+]

Originally Posted by owen-b

Is there a way to disable the effect on just IE, and leave it on for the people that use the infinitely superior browsers?

of course: use "opacity" and leave the IE proprietary alpha-thing.
Besides "opacity" validates with CSS2.0

KArin

PS: it seems somehow misterious but since I changed my template the opacity doesn't seem to produce any pixel failures in IE anymore... Perhaps IE7 was updated with that?