#13562 new bug ()

Opened July 10, 2015 05:27PM UTC

Last modified July 10, 2015 06:50PM UTC

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.

Attachments (0)
Change History (4)

Changed July 10, 2015 05:33PM UTC by akrawitz comment:1

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

Before sorting:

[[Image(http://web.uvic.ca/psyc/krawitz/tmp/Before.png)]]

After sorting:

[[Image(http://web.uvic.ca/psyc/krawitz/tmp/After.png)]]

Changed July 10, 2015 05:37PM UTC by akrawitz comment:2

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/

Changed July 10, 2015 05:49PM UTC by scottgonzalez comment:3

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

Changed July 10, 2015 06:50PM UTC by akrawitz comment:4

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.