Question

I’m developing a music player based on jQuery, which has a long list of items in the main section (unordered list, with <div> elements in each <li>, for info about artist, album and title).

You can access a temporary public version of it here:
http://music.sixteennet.co.uk/?anonymous

(All songs are dud links on the public version, so don’t bother playing anything :P)

First, a quick description of what exactly this thing is:

To the left is a sidebar, displaying the list of songs coming up. The user selects songs in the main list (click, shift-click, ctrl-click, you know the drill) after searching/clicking artists, and adds them to the playlist to the left, either by hitting or dragging and dropping. I’ve got all this working (this question isn’t regarding how to build a Javascript user interface).

The problem: $(window).mousemove(), .mouseup() and .mousedown() contain functions to bring into view a box, with height in pixels of (16 * number of selected songs in main list) [each <li> is 16px high]. When the mouse is moved, this box moves with it, until when the mouse is over the playlist, the playlist changes colour and if the user decides to mouseup() (un-click), the selected songs are added to the playlist.

The only thing is, when the mouse is moving with the selected songs box currently visible, in Google Chrome the box’s movement is incredibly laggy but only when the mouse is over the main songs list (however, CPU usage is stuck at 100% throughout the time the box is displayed). In Firefox 6 and IE 9, the movement is smooth throughout, and CPU usage is not 100% (even on an Athlon 64 3500+). This test has been repeated (by me) on two PCs, one running Windows 7 and the other running Ubuntu Linux.

I very much suspect it’s a bug with Google Chrome, but if anyone has the good will to go through the source code and tell me what the problem is (if there is one)…you’re God to me 🙂

EDIT: the reason I said Chrome/V8 is because Safari, using the same rendering engine (WebKit) does not have this issue (although it is not as smooth as Firefox/IE9/Opera)

Answer 1

I’m going to answer my own question, as I’ve found a solution:

Running this jQuery function on the box fixed the lag issue:

$.fn.disableSelection = function() {
  return this.each(function() {
    $(this).attr('unselectable', 'on')
    .css({
      '-moz-user-select':'none',
      '-webkit-user-select':'none',
      'user-select':'none',
      '::selection':'none',
    })
    .each(function() {
      this.onselectstart = function() { return false; };
    });
  });
};