Featured Content Slider v2.4 - Initial image blinks before fade effect in IE9 Beta

[mikish]

1) Script Title: Featured Content Slider v2.4

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tentslider.htm

3) Describe problem: Initial image blinks before fade effect in IE9 Beta - every time the fade effect starts it first flashes the image, then it disappears and fades in - IE9 only - I will likely change all of my sites that use this script over to this one because the mouseover pause is a nice touch. The same problem occurs in IE9 with this version as well :-( Please help, I have used this terrific script on numerous websites :-(

[jscheuer1]

Report beta bugs to Microsoft. Once there is a full release version of IE 9, if the problem hasn't been resolved, then someone here will have a look at it.

[ddadmin]

This does just appear to be a bug of IE9, or at least the way it's currently renders opacity. I've narrowed down the problem to the following portion of code:

		if (typeof targetobject.filters[0].opacity=="number") //IE6
			targetobject.filters[0].opacity=value*100
		else //IE 5.5
			targetobject.style.filter="alpha(opacity="+value*100+")"

The line in bold is what IE9 currently will pick up and use to set the opacity, though apparently at the moment that causes a flicker. If I resort to the IE5.5 version of the code that follows it instead for IE9, the flicker is gone. There's no logical explanation for this, but a temporary solution then is to force IE9 to use the IE5.5 version, by replacing the above chunk of code with the following instead:

		if (typeof targetobject.filters[0].opacity=="number" && typeof targetobject.style.opacity=="undefined") //IE6 to IE8
			targetobject.filters[0].opacity=value*100
		else //IE 5.5
			targetobject.style.filter="alpha(opacity="+value*100+")"

FYI IE9 does support the standard "opacity" property for setting an element's opacity, though this only works if you remove the "filter" rules inside the .css file, which if you do removes the fade effect in older browsers. In other words, IE9 definitely has some kinks to work out.

[mikish]

Thanks for your quick attention to this issue. Unfortunately the temporary solution of reverting to the IE5.5 solution has a few issues also ...works for a couple of renders then flashes/flickers for a couple then works fine for another couple etc... Hopefully IE9 will work this out properly on their end before final release ...in the meantime I can only hope that none of my website viewers are using IE9 Beta. Thanks again for taking the time to look at my issue

[jscheuer1]

FYI IE9 does support the standard "opacity" property for setting an element's opacity, though this only works if you remove the "filter" rules inside the .css file, which if you do removes the fade effect in older browsers. In other words, IE9 definitely has some kinks to work out.

You could make all the filter opacity styles be in a separate sheet on the page or linked inside a conditional comment for lt IE 9.

If it works properly with generic opacity, use that. The text rendering of faded text should be correct, and alpha channel images should also render correctly. Neither of these is true using the alpha opacity filter from IE 7 on.

But, as I say, this beta bug should be reported to MS. Once they have a full release version, then it becomes our headache.

However, MSIE since 6 has never had even adequate support for opacity. There's no reason to expect that to change any time soon, though one may hope.

[ddadmin]

If it works properly with generic opacity, use that. The text rendering of faded text should be correct, and alpha channel images should also render correctly. Neither of these is true using the alpha opacity filter from IE 7 on.

That's an excellent point, and I should have just posted a workaround based on that instead. Never question John!

So to get IE9 to use the "opacity" property instead, replace the entire setopacity() function inside the .js file to the following version:

setopacity:function(setting, value){ //Sets the opacity of targetobject based on the passed in value setting (0 to 1 and in between)
	var targetobject=setting.contentdivs[setting.currentpage-1]
	if (targetobject.filters && targetobject.filters[0] && typeof targetobject.style.opacity=="undefined"){ //IE syntax (but not IE9)
		if (typeof targetobject.filters[0].opacity=="number") //IE6
			targetobject.filters[0].opacity=value*100
		else //IE 5.5
			targetobject.style.filter="alpha(opacity="+value*100+")"
	}
	else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax
		targetobject.style.MozOpacity=value
	else if (typeof targetobject.style.opacity!="undefined"){ //Standard opacity syntax
		targetobject.style.opacity=value
	}
	setting.curopacity=value
},

This isn't enough at the moment however. You now need to remove the below CSS rule inside the .css file:

filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);

and then inside the HEAD section of your page containing the slider, compensate by adding the following code:

<!--[if lt IE 9]>
<style type="text/css">
.sliderwrapper .contentdiv{
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
}
</style>
<![endif]-->

This reintroduces the filter rule, but only to IE8 and lesser browsers due to the related issue mentioned in my post above.

[tomkorver]

Hi,

I have the same problem, the initial transition flashes, then the transitions are normal. The transition also flashes when I mouseover the thumbs.

This happens in FF3, Chrome8 and IE8.

I'm a javascript beginner, please explain to me what I have to do to fix it?

[tomkorver]

Anyone?
Or should I start a new topic for this?

[dmgood]

I have the same problem, the initial transition flashes, then the transitions are normal. The transition also flashes when I mouseover the thumbs.
This happens in FF3, Chrome8 and IE8.

I have the same problem as well, please see my as yet unanswered thread at
Black start to Ultimate Fade-in slideshow

Thanks.