Chrome bug? Cursor changes on mouse down + move

Question

In Chrome (I am using version 16.0.912.75 m on Win 7) I find that no matter what I have a cursor set as, as soon as I hold my left mouse button down and move the cursor then the cursor type is changed to text (even when there is no text anywhere on the page).

Is this a bug? Does anyone know how to get around it as it is making my drag and drop tool look a bit silly!

JSFiddle: http://jsfiddle.net/KJfbs/

Edit

As answered by @davgothic below, adding -webkit-user-select: none; will fix the issue when there is no text. However, should we position the element absolutely and place text behind it then the problem persists.

JSFiddle: http://jsfiddle.net/KJfbs/2/

Answer 1

Try adding -webkit-user-select: none; to the CSS for that element to prevent text selection.

Example: http://jsfiddle.net/KJfbs/1/

Personally I would also add these...

-webkit-user-select: none;
 -khtml-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
     -o-user-select: none;
        user-select: none;

...for cross browser compatibility.

Answer 2

I think that with -webkit-user-select: none; the problem persists if you put anything else in the page. For instance: http://jsfiddle.net/KJfbs/237/

Anyway I think jQuery preventDefault solves the problem in any case: http://jsfiddle.net/KJfbs/241/

preventDefault avoids the default behavior that is change to cursor text.
Then I can control and put any cursor I want: $(this).css("cursor","wait");

JQUERY:

$(function(){
    $('#lime').mousedown(function(e) {
        e.preventDefault();
        $(this).css("cursor","wait"); 
    }).on('mouseup mouseleave', function() {
        $(this).css("cursor","default");
    }); 
});

HTML:

<div id="lime"></div>
<p>Lorem ipsum dolor sit amet</p>

CSS:

#lime {
    background-color: lime;
    height: 100px; width: 300px;
    cursor: wait;
    position: absolute;
    top: 0; left: 0;
}