jQuery UI Sortable slow in FireFox

This is just a note for other developers searching on the same issue, as I didn’t find anything online when I was looking for ideas.

jQuery UI Sortable is a great way to work with drag and drop web interfaces but I found it was running painfully slow in Firefox. It was snappy in Chrome, and surprisingly responsive in IE, but Firefox was lagging.

As the official Sortable demo ran fine in Firefox it was easy enough to work out that it was something in my own code causing the problem. After cutting out items and returning them one by one it seems that having too much CSS3-niceness within the draggable elements was the culprit.

Each item I was dragging included a set of mini buttons styled with the lovely Bootstrap effects (gradients, rounded corners, shadows etc.) and although Chrome wasn’t phased by this it seems to knockout Firefox.

Valuing responsiveness more than prettiness, my solution was to cut back on the styling of these items and I’m happy with the results.

Hopefully this is useful to you too.