jQuery UI Sortable + Bootstrap’s Buttons = Perfect Performance Storm

I ran into this crazy performance problem on:

  • jQuery 1.7.1
  • jQuery UI 1.8.16
  • Twitter’s Bootstrap 1.4.0
  • Windows 7 / Chrome¬†16.0.912.63

See how the button starts dragging from the top left corner and drags really slowly? I stripped down the CSS element by element using Chrome’s dev tools and was able to isolate the problem to the -webkit-transition and box-shadow styles on the .btn class. Setting those to none fixed the problem.

This entry was posted in Development and tagged , , , , , . Bookmark the permalink.

7 Responses to jQuery UI Sortable + Bootstrap’s Buttons = Perfect Performance Storm

  1. Ken says:

    I have been using Bootstrap for about a week now and have been noticing some nasty lag and funkiness between elements. I was trying to figure this out and this solved. The transition properties definitely make an impact – and you can’t even notice them when they’re disabled.

    Thanks!

  2. simon says:

    umm, they both perform exactly alike, for me…

  3. Suraj says:

    I’ve discovered the same bug with different versions!

    Jquery 1.7.1
    JqueryUI 1.9.2
    Bootstrap 2.0.3

    Drag drop works fine. With Bootstrap 2.3.0 or 2.3.1 I get the same lag issue. Any idea how I can pinpoint what is causing it?

    • Eli Thompson says:

      The way I pinpointed the original problem was to use Chrome’s inspector, disable almost all the styles, then re-add them one by one until the problem surfaced. It didn’t actually take very long.

      • Suraj says:

        Yeh I figured it out – the problem was the “transition” styles applied to the .thumbnails class. Remove these and it works perfectly.

Leave a Reply

Your email address will not be published. Required fields are marked *