buildDownloadRow with jQuery Templates adding display:block in firefox

[ryanwi]

I hooked up jQuery templates and am getting weird behavior for adding table rows. It's adding a display:block on the <tr> in firefox 3.6.13. It doesn't in chrome.

Here's the function:

buildDownloadRow: function (file) {
    return $("#documentTemplate").tmpl(file);
}

The Template:

<script id="documentTemplate" type="text/x-jquery-tmpl">
    <tr>
        <td>${name}</td>
        <td>${size}</td>
    </tr>
</script>

Results in this in FF:

<tr style="display: block;">
    <td>name</td>
    <td>2508</td>
 </tr>

Anybody seeing this? With the raw markup as done in the example, the display:block isn't added, so must be something in jQuery templates. But, I thought I'd start here anyway before posting in the templates project issue tracker.

[blueimp]

I think this has nothing to do with the jQuery templates plugin (which is also used for the jQuery File Upload Demo).
The display:block is also added when using the example code (without the jQuery templates plugin), at least in my tests with Firefox 3.6.

The reason why display:block is added has to do with the way the download and upload rows are added to the download/upload tables:

node.hide().appendTo(parentNode).fadeIn(/**/);

So this might be a bug in jQuery's fadeIn on Firefox.

[ryanwi]

I'll try some more tests on Monday, but it wasn't a problem when building the markup by hand, as the example does.

The issue with the display:block in my case is that the new rows appear to be independent of the other rows in the download table. The page I'm using the plugin on renders all files already associated with a project. Then, fileUploadUI appends any new files into that existing table, but the columns for the new rows don't line up with the other rows that were already there when the page loaded initially.

[blueimp]

I did some testing and it definitely has to do with jQuery's fadeIn method. If I remove the hide method call no display:block is added, but then there is no fade in effect either.

And like I said, in my test this happens with the example code as well, so I still don't think it has to do with jQuery Templates.

I also found some jQuery bug listings related to this problem (inline elements getting display:block after calling fadeIn on them):

• http://bugs.jquery.com/ticket/7397
• http://bugs.jquery.com/ticket/7110
• http://bugs.jquery.com/ticket/1291

Although they have been closed, they have also been repopened multiple times, so this seems to be a tricky recurring problem.

[blueimp]

OK, seems like css('display', 'none') instead of hide before calling fadeIn seems to do the trick and prevent the undesired display:block style - I've committed a new version which should fix this issue.