CSS cursor change not working when mouse is down

Question

I'm holding the mouse down on my html element which changes the cursor. Now if user hits a key while mouse button is still pressed, I assign another cursor to the element. This works perfectly fine on Mozilla which immediately changes the cursor but NOT in chrome. In chrome, I need to move the cursor for at least one pixel to make the new cursor visible. NOTE that this happens only when the mouse button is pressed. If not, cursor switches immediately as desired. Any idea how to fix that properly?

UPDATE: I've just found that this seems to be a bug in WebKit: https://bugs.webkit.org/show_bug.cgi?id=53341

But anyway, any idea to make it still working as there's no fix out yet?

Here's a sample of the miss-behavior: JSFiddle Sample with this code:

html:

<div id="test1" style="background:blue;width:200px;height:200px;color:white">Case #1 -   cursor not changing for mousedown before moving it (Press mouse - nothing happens. Then hold mouse and move)</div>

<div id="test2" style="background:red;width:200px;height:200px;color:white">Case #2 - cursor not changing for mousedown before moving it when pressing a key (Press mouse, then click any key - Nothing happens. Then hold mouse and move)</div>

js:

var el1 = document.getElementById("test1");
var el2 = document.getElementById("test2");

el1.addEventListener("mousedown", function() {
    el1.style.cursor = "move";
});

document.addEventListener("keydown", function() {
    el2.style.cursor = "move";
});

Answer 1

This is working for me in chrome without having to move a mouse:

var el1 = document.getElementById("test1");
var el2 = document.getElementById("test2");

el1.addEventListener("mousedown", function() {
    el1.className += ' cursormove';  
});
document.addEventListener("keydown", function() {
    el1.style.cursor = "pointer";
});


.cursormove {cursor:move;}

http://jsfiddle.net/ntdap5hf/4/

Or do i miss something?