Sortable: Growing table bug in FireFox

[gordon]

In FireFox, certain conditions can cause tables to grow by one pixel per sort if they have a sortable applied to them.

[gordon]

Demonstration of the problem

[paul]

This seems to be a Gecko issue, and I couldn't find out why it happens - but it's definitely a rendering bug. There is a hotfix though - if you set and reset the position from static to absolute on the tbody, it will fix itself.

$('.questionGrid tbody').sortable({

handle: '.sortHandle', helper: function() {

return $("<div>Sorting..</div>")[0];

}, start: function() {

$(this).css("position", "relative");

}, stop: function() {

$(this).css("position", "");

}

});

[netsuke]

The same thing happens in Chrome, and the proposed workaround does not work.

[avuori]

Yes, this is a quite annoying problem.

As a weak workaround, I found out that in the stop callback, the following prevents the table growth.

$(this).closest("table").hide();
var that = this;
window.setTimeout(function () {
    $(that).closest("table").show();
}, 0);

Interestingly, the setTimeout is needed for it to work. The big price of the workaround is that this causes flickering. The workaround was tested in Chrome.