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.

2 thoughts on “jQuery UI Sortable slow in FireFox”

  1. Adam, thanks for the post. I also experienced very slow drag~n~drop speeds in Firefox. Like you I had lots of items and each was fill with lots of css styled elements. The biggest culprit I found that caused the slowness was FIREBUG being enabled. Once I disabled all Firebug panels it speed way up! Granted, it is no way near as fast as Chrome or IE, but I think it is an acceptable speed. Below is a bit of Javascript that will detect if the user is running Firefox and Firebug with firebug panels enabled. You could pop an alert to the user that they will experience slowness unless they temporarily disable firebug.

    if (window.console && (window.console.firebug || window.console.exception)) {
    // Firebug is enabled
    }

  2. jQuery UI Sortable slow in FireFox…
    I am also facing the same issue. Can you suggest some solution for the same.

    Thanks in advance.

Comments are closed.