Mouse cursor not changing if a pointer is not moved in Webkit-based browsers

Question

Let's assume that we have simple jQuery code like the following:

var $document = $(document);
$document.ready(function() {
    var $test = $("#test");
    $document.keydown(function(e) {
        e.shiftKey && $test.css("cursor", "pointer");
    });
});

The problem is that WebKit does not change the #test block mouse cursor if the mouse pointer is moved over the #test block, and the Shift key is pressed then. But as soon as you move the cursor, Chrome and Safari change the cursor style to pointer - exactly as it's expected but without mouse move. This bug (?) is not relevant to Firefox, and I didn't check it under Internet Explorer and Opera...

So, did anyone have experience with the same trouble? Perhaps, is there a workaround for that?

Thanks in advance.

Answer 1

I've found a workaround to the problem.

It seems the cursor is changed if you force the browser to reflow. So, if you set the cursor on elem and then call elem.scrollTop (or any number of properties which trigger a reflow), the cursor will update in place.

So in your case the code would end up being:

var $document = $(document);
$document.ready(function() {
    var $test = $("#test");
    $document.keydown(function(e) {
        e.shiftKey && $test.css("cursor", "pointer");
        $test[0].scrollTop;
    });
});