This project is archived and is in readonly mode.

#1163 ✓wontfix
raider5

Fade/Tween issue with IE

Reported by raider5 | February 3rd, 2011 @ 01:30 PM

I'm getting a strange problem with a fade out effect in IE 6/7/8. The
following demo continuously fades between 3 elements. The first time
around it works as expected, but as soon as it loops around for a
second time the fade stops working:

http://jsfiddle.net/raider5/TpxuY/

I wrote an equivalent version in jQuery which works fine:

http://jsfiddle.net/raider5/Lk8BQ/1/

The fact that it's working in all other browsers and in jQuery makes
me think it's possibly a bug with the opacity implementation?
Hopefully it isn't and someone can point out where I'm going wrong?

Cheers

SJ

http://groups.google.com/group/mootools-users/browse_thread/thread/...

Comments and changes to this ticket

  • raider5

    raider5 February 5th, 2011 @ 05:29 PM

    Had a look in to this issue, took a lot of digging! From what I can see IE has some quirk when both filter (alpha opacity) and "visibility:hidden" are set, that makes it difficult to "reset" the element. MooTools when setting the opacity also adds visibility hidden/visible to the element which is why this issue has appeared. The following example illustrates some of the combinations, note the order of the styles in "manualResetV1" and "manualResetV2", I wouldn't have thought they should make a difference:

    http://jsfiddle.net/raider5/xaYbT/

    By coincidence somebody has just commented on an older ticket #680 regarding the addition of the visibility property. I think it would be a good idea to only affect the filter/opacity, especially when using setStyle.

    The reason this issue didn't come up in the jQuery version is because they use "display:none" instead. Again, not sure if additional styles should be added, and if they are, it would be good to update the docs.

    Cheers,

    SJ

  • raider5

    raider5 February 5th, 2011 @ 05:41 PM

    Also...

    removing the following 3 lines from "Element.Properties.opacity.set" allows the original example to work:

    "var visibility = this.style.visibility; if (opacity == 0 && visibility != 'hidden') this.style.visibility = 'hidden';
    else if (opacity != 0 && visibility != 'visible') this.style.visibility = 'visible';"

    Cheers,

    SJ

  • Christoph Pojer

    Christoph Pojer February 23rd, 2011 @ 01:26 PM

    • State changed from “new” to “wontfix”

    Hello,

    this behavior will be fixed in 2.0 when we drop visibility: hidden on opacity change. Display: none is not appropriate because it would actually hide the element, where visibility only makes it invisible (it's still there!).

    A workaround is to manually set the visbility to visibile again or to use setOpacity instead of setStyle('opacity', ..). setOpacity ignores the visibility property. You can make a custom animation based on this:

    var element = myElement;
    var fx = new Fx;
    fx.set = function(value){
    element.setOpacity(value); }; fx.start(1, 0);

    You can also easily put that in a class :)

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

Shared Ticket Bins

People watching this ticket

Referenced by

Pages