Rick Strahl's Weblog  

Wind, waves, code and everything in between...
.NET • C# • Markdown • WPF • All Things Web
Contact   •   Articles   •   Products   •   Support   •   Advertise
Sponsored by:
Markdown Monster - The Markdown Editor for Windows

$.fadeTo/fadeOut() operations on Table Rows in IE fail


:P
On this page:

Here’s a a small problem that one of customers ran into a few days ago: He was playing around with some of the sample code I’ve put out for one of my simple jQuery demos which deals with providing a simple pulse behavior plug-in:

$.fn.pulse = function(time) {
    if (!time)
        time = 2000;

    // *** this == jQuery object that contains selections
    $(this).fadeTo(time, 0.20,
                        function() {                    
                            $(this).fadeTo(time, 1);
                        });

    return this;
}

it’s a very simplistic plug-in and it works fine for simple pulse animations. However he ran into a problem where it didn’t work when working with tables – specifically pulsing a table row in Internet Explorer. Works fine in FireFox and Chrome, but IE not so much. It also works just fine in IE as long as you don’t try it on tables or table rows specifically. Applying against something like this (an ASP.NET GridView):

var sel =
    $("#gdEntries>tbody>tr")
            .not(":first-child")  // no header
            .not(":last-child")   // no footer
            .filter(":even")
            .addClass("gridalternate");

// *** Demonstrate simple plugin
sel.pulse(2000);

fails in IE. No pulsing happens in any version of IE. After some additional experimentation with single rows and various ways of selecting each and still failing, I’ve come to the conclusion that the various fade operations in jQuery simply won’t work correctly in IE (any version). So even something as ‘elemental’ as this:

var el = $("#gdEntries>tbody>tr").get(0);
$(el).fadeOut(2000);

is not working correctly. The item will stick around for 2 seconds and then magically disappear.

Likewise:

sel.hide().fadeIn(5000);

also doesn’t fade in although the items become immediately visible in IE. Go figure that behavior out.

Thanks to a tweet from red_square and a link he provided here is a grid that explains what works and doesn’t in IE (and most last gen browsers) regarding opacity:

http://www.quirksmode.org/js/opacity.html

It appears from this link that table and row elements can’t be made opaque, but td elements can. This means for the row selections I can force each of the td elements to be selected and then pulse all of those. Once you have the rows it’s easy to explicitly select all the columns in those rows with .find(“td”). Aha the following actually works:

var sel =
    $("#gdEntries>tbody>tr")
            .not(":first-child")  // no header
            .not(":last-child")   // no footer
            .filter(":even")
            .addClass("gridalternate");

// *** Demonstrate simple plugin
sel.find("td").pulse(2000); 

A little unintuitive that, but it works.

Stay away from <table> and <tr> Fades

The moral of the story is – stay away from TR, TH and TABLE fades and opacity. If you have to do it on tables use the columns instead and if necessary use .find(“td”) on your row(s) selector to grab all the columns.

I’ve been surprised by this uhm relevation, since I use fadeOut in almost every one of my applications for deletion of items and row deletions from grids are not uncommon especially in older apps. But it turns out that fadeOut actually works in terms of behavior: It removes the item when the timeout’s done and because the fade is relatively short lived and I don’t extensively test IE code any more I just never noticed that the fade wasn’t happening.

Note – this behavior or rather lack thereof appears to be specific to table table,tr,th elements. I see no problems with other elements like <div> and <li> items.

Chalk this one up to another of IE’s shortcomings.

Incidentally I’m not the only one who has failed to address this in my simplistic plug-in: The jquery-ui pulsate effect also fails on the table rows in the same way.

sel.effect("pulsate", { times: 3 }, 2000);

and it also works with the same workaround. If you’re already using jquery-ui definitely use this version of the plugin which provides a few more options…

Bottom line: be careful with table based fade operations and remember that if you do need to fade – fade on columns.

Posted in jQuery  

The Voices of Reason


 

olivvv
November 09, 2009

# re: $.fadeTo/fadeOut() operations on Table Rows in IE fail

Js is often functionning wrong with Tables. I experienced issues with mousover/mouseout.

Herb Caudill
November 09, 2009

# re: $.fadeTo/fadeOut() operations on Table Rows in IE fail

In IE, you can't apply css block styling of any sort to a tr element (background, margins, borders, etc). You always have to target the td. So I'm not surprised that the same applies to opacity.

Rick Strahl
November 09, 2009

# re: $.fadeTo/fadeOut() operations on Table Rows in IE fail

@Herb - that's not quite true. You certainly can assign background to tr elements and have it propagate. But you're right on anything that affects the placement or relative positioning like margins and border.

Opacity is a little different though since it is effectively a behavior rather than a positioning attribute. <shrug> It is what it is but it really bites that it only affects IE. You can bet if something doesn't work to spec it'll be IE that doesn't support it for sure while other browsers do.

Mark
November 09, 2009

# re: $.fadeTo/fadeOut() operations on Table Rows in IE fail

Not sure if this helps or not but I have noticed that mouseenter & mouseleave tend to work more reliably than mouseover & mouseout.

Paul Cole
November 09, 2009

# re: $.fadeTo/fadeOut() operations on Table Rows in IE fail

I ran across the same problem a little while ago when I wanted to give the user a visual cue that the quantity of an item had changed by fading the row out, changing the quantity in a text box and then fading it back in.

To solve it I instead animated the opacity like so:

var row = $("selector for tr");
var txtQty = $("input:text", row);

row.animate({opacity: 0.0}, 700, function() {
    txtQty.val(newValue);
    row.animate({ opacity: 1.0 }, 700);
});

which seems to work fine in IE6+, FireFox, Chrome, Opera and Safari.

Mike Gale
November 09, 2009

# re: $.fadeTo/fadeOut() operations on Table Rows in IE fail

I wouldn't put this down to an IE problem.

IE has been there a lot longer than jQuery.

It's a hole in the jQuery implementation.

Sergio Pereira
November 09, 2009

# re: $.fadeTo/fadeOut() operations on Table Rows in IE fail

I've had other issues with IE and opacity. One being the fonts looking horrible after changing the text's opacity. It's as if it disabled ClearType.

Rick Strahl
November 10, 2009

# re: $.fadeTo/fadeOut() operations on Table Rows in IE fail

@Sergio - Yes that's a known issue although in most cases it works OK. It's certain combinations of objects overlapping that cause the ClearType hell :-}

Rick Strahl
November 10, 2009

# re: $.fadeTo/fadeOut() operations on Table Rows in IE fail

@mike - ok - every other (recent) browser works fine and IE doesn't... It's not really a hole in jquery if you can't effectly DO what you want to because the element doesn't support it. Not pointing fingers, here it is what it is, but it still is annoying when you run into it. At least there's a workaround by selecting all the cells in the row.

@mark - mouseenter/mouseleave are IE only events so not terribly useful.

Chris
November 11, 2009

# re: $.fadeTo/fadeOut() operations on Table Rows in IE fail

There's a similar issue created about this, and looks like the jQuery team plans to fix for 1.4:

http://dev.jquery.com/ticket/4440

Also, if you can stomach it, it might work to roll back to jQuery 1.3.1

Christian Theriault
March 01, 2011

# re: $.fadeTo/fadeOut() operations on Table Rows in IE fail

I had the same issue with fading on <span> elements in IE8 + jQuery 1.4 although they were looking fine on other browsers.

I just embed the text to fade (in or out) it in a <div> instead, and it started fading as expected. Thanks Rick for the hint!

Stijn Herreman
April 03, 2012

# re: $.fadeTo/fadeOut() operations on Table Rows in IE fail

Still relevant today. IE9 either does a half-assed job, or nothing at all.

West Wind  © Rick Strahl, West Wind Technologies, 2005 - 2024