Opened 3 years ago

Last modified 3 years ago

#13562 new bug

Extra border spacing when sorting table rows in Safari

Reported by: akrawitz Owned by:
Priority: minor Milestone: none
Component: ui.sortable Version: 1.11.4
Keywords: Cc:
Blocked by: Blocking:

Description

I have a table with sortable rows (note that sortable() has been called on tbody as stated in the documentation). When I sort the rows, the border spacing gets bigger and bigger. This occurs when the table has the default setting of "border-collapse: separate".

I've created a very simple fiddle to demonstrate this: http://jsfiddle.net/t6qzn5c8/1/
Repeatedly sort the rows and the border space will keep growing.

This happens in Safari 7.1.7 running on OS X 10.9.5. This does not happen on Chrome 43, Firefox 39, IE 11, or Opera 30 running on Windows 7 Pro SP1. It has been reported to me that this also occurs in Safari 8.0.7 and Safari 9.0 (http://forum.jquery.com/topic/extra-border-spacing-in-sortable-table-in-safari-7-1-7).

I am using jQuery UI 1.11.4 and jQuery 1.11.3.

Change History (4)

comment:1 Changed 3 years ago by akrawitz

Here are before and after images of what the table looks like.

Before sorting:
http://web.uvic.ca/psyc/krawitz/tmp/Before.png

After sorting:
http://web.uvic.ca/psyc/krawitz/tmp/After.png

comment:2 Changed 3 years ago by akrawitz

I believe I have isolated the underlying Safari issue. The problem seems to arise when 'position: absolute' is applied to a <tr>. In this fiddle (which uses pure JavaScript, no jQuery or jQuery UI), you can add and remove rows and toggle a row between it's default of 'position: static' and an applied 'position: absolute'. When you toggle the position, I also change the color to a transparent red, so you can see what is going on a bit better. Once a row has been toggled to 'position: absolute', extra border space appears in the table. The extra space sticks around, even if you then toggle the row back to 'position: static' or remove it: http://jsfiddle.net/3hffrur9/2/

comment:3 Changed 3 years ago by Scott González

Thanks for tracking that down. It doesn't sound like there's anything we can do though. Have you reported the bug to WebKit? https://bugs.webkit.org

comment:4 in reply to:  3 Changed 3 years ago by akrawitz

I just submitted it to WebKit: https://bugs.webkit.org/show_bug.cgi?id=146844

Also, I think I have found a workaround: http://jsfiddle.net/t6qzn5c8/2/ I detach and immediately append the tbody to the table in the sortstop event. I've tried this in my real code, which has a much more complex table, and it still seems to happen so quickly that the user doesn't notice. Thanks to jakecigar for suggesting this sort of approach in the forum thread referenced above.

Note: See TracTickets for help on using tickets.