1

The title pretty much sums it up. I get horrible performance when dealing with lots of unselectable elements on a page and I try to implement a drag'n drop system.

I have a timer setup to show it's interval, when you click and move your mouse anywhere on the example page, you will see the interval going through the roof..

the offending css:

body
{
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

Remove that, and everything is as you would expect. It doesn't seem to matter whether these rules are linked to body, the divs or to the actual spans itself.

Any ideas as to what's going on here?

thanks in advance! ( here's the fiddle: http://jsfiddle.net/e62pE/2/ )

Arjan
  • 484
  • 3
  • 11

1 Answers1

1

Workaround

To avoid this issue I found two things being helpful in tackling this issue.

  1. Only apply the CSS rules to the elements that should be affected by this setting, and only to the highest elements wrapping all those elements. (For instance, if you want to affect a few rows in a table, only affect the specific table rows, not the entire table or worse, the entire document.)

  2. Only apply the CSS rules when a selection should be avoided, removing the rules afterwards. This keeps the DOM clean and responsive.

(The WebKit Bugzilla actually contains a bug report describing this problem.)

My situation

I came to this conclusion when debugging the exact same effects as you describe, where I managed to create a workaround working in all major browsers. I'm not really sure if this would apply to your specific situation as well, but nonetheless, here goes.

I have a <table> with hundreds, thousands, or even more, <tr>'s. When a user SHIFT-clicks on a row, I want to apply a style to a range of rows, ranging from the previous clicked row to the row that was SHIFT-clicked, without selecting text in the process.

At first I added the user-select: none; CSS to table.user-select-none td, which basically means all cells being affected (which can quite add up).

The workaround now only applies the class at SHIFT + Mouse Down, and only to the <tr>'s in the range, using the CSS selector tr.user-select-none. After a small timeout (40 ms), the class is removed, to keep the DOM tidy and responsive.

This workaround has sped up the selection process from an average 500 ms to 50 ms, making this a workable solution for now.

Michiel Bakker
  • 100
  • 7