Table cell with background color turning white when fadeTo called in FireFox 11

Question

I have a large table which has a background-color on each td. I also have the following code:

    $('.table-cell').live('mouseover', function () {
        $(this).stop().fadeTo('slow', 0.7);
    });


    $('.table-cell').live('mouseout', function () {
        $(this).stop().fadeTo('fast', 1.0);
    });

The mouseover is working fine. The color will change to a lower opacity nicely but when your mouse leaves the cell the cell goes white (except for the text which continues to have a colored background). After the fade completes the color will return properly but it looks really bad while it's changing.

We have this problem in FireFox 11 and IE8 (7 & 9 work fine).

it looks fine here, can you provide an example? http://jsfiddle.net/cKWcv/ — user1289347, Apr 19 '12 at 22:37
Your example has the same problem in FireFox 11 on my machine which I forgot to mention in my example.. shoot.. sorry about that! Fixed it — Shane Courtrille, Apr 19 '12 at 22:42
Ya that makes a difference. Use the jquery UI color animation, works great in FF 11. http://jqueryui.com/demos/animate/ — user1289347, Apr 19 '12 at 22:45
Animate with opacity has the same problem. Is opacity just not supported in FF? — Shane Courtrille, Apr 19 '12 at 22:46
it seems it's a bug in FF with `TD` and opacity (even not animated). I've tried this simple code, and that bug still appear: `$('td').hover(function () { $(this).css({'opacity': '0.7'}); }, function () { $(this).css({'opacity': '1.0'}); });` — Devtrix.net, Apr 19 '12 at 22:48
Yes it seems to be a td issue, fadeto works great in FF http://api.jquery.com/fadeTo/ — user1289347, Apr 19 '12 at 22:48
So how does one handle this? There doesn't appear to be any feature detection we can use to disable the fading effects for Firefox and browser detection seems to be heavily recommended against. Is this just one of those times where you have to do it? — Shane Courtrille, Apr 19 '12 at 22:50
If you uncheck normalize css in user1289347's fiddle it seems fine. — j08691, Apr 19 '12 at 23:51

score 2 · Accepted Answer · edited May 23 '17 at 12:21

The problem is border-collapse: collapse; this will solve the problem

table
{
    border-collapse:separate;
}

Example

In the comments I noticed that this fiddle is not working like Chrome in FF because the Normalized CSS was checked and this fiddle just works fine in both Chrome and FF without Normalized CSS. Check this answer to understand Normalized CSS that uses border-collapse: collapse;.

Nnormalize.css link

Table cell with background color turning white when fadeTo called in FireFox 11

1 Answers1