Results 1 to 9 of 9

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

  1. #1
    Join Date
    Sep 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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 :-(

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,375
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2004
    Posts
    10,138
    Thanks
    3
    Thanked 1,007 Times in 992 Posts
    Blog Entries
    16

    Default

    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:

    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:

    Code:
    		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.
    DD Admin

  4. #4
    Join Date
    Sep 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,375
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by ddadmin View Post
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Aug 2004
    Posts
    10,138
    Thanks
    3
    Thanked 1,007 Times in 992 Posts
    Blog Entries
    16

    Default

    Quote Originally Posted by jscheuer1 View Post
    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:

    Code:
    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:

    Code:
    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:

    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.
    DD Admin

  7. #7
    Join Date
    Nov 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  8. #8
    Join Date
    Nov 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  9. #9
    Join Date
    Feb 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by tomkorver View Post
    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •