Force Chrome cursor update when mouse-idling vanilla javascript

Question

I have a similar issue as related in this link :

https://code.google.com/p/chromium/issues/detail?id=26723

When new div appears and when mouse does not move, cursor is not updated in Chrome 40. The Chrome issue list some workarounds, but I don't get them to work with my code. There are also some stackoverflow question listing this issue but they don't fix this particular case with vanilla javascript.

HTML :

<div id ="d">
    Hello
</div>

CSS :

div#d {
    width: 100px;
    height: 100px;
    background-color: red;
}

div.curs {
    cursor: pointer;
    height: 80px;
    background-color: grey;
}

JS :

setTimeout(function(){
    var div = document.getElementById('d');
    div.innerHTML = div.innerHTML + '<div class="curs">World</div>';    
}, 5000);

What is the easiest vanilla javascript workaround for this particular case?

Fiddle : http://jsfiddle.net/2zh90st6/

score 3 · Accepted Answer · answered May 11 '15 at 20:19

On Google Chrome v42, you can schedule a cursor update by changing the cursor style of the element currently under the cursor, or any of this element's ancestors. Note that the cursor style has to change after the new element has been added to the DOM.

var container, overlay;

container = document.getElementById('container');

setTimeout(function() {
  overlay = document.createElement('div');
  overlay.id = 'overlay';
  container.appendChild(overlay);

  // Change container cursor from 'auto' to 'default',
  // to schedule cursor update while hovering overlay
  container.style.cursor = 'default';
}, 5000);

#container {
  position: relative;
  padding: 10px;
  cursor: auto;
  background: #7FDBFF;
  color: #001F3F;
  width: 100px;
  height: 100px;
}
#overlay {
  cursor: pointer;
  width: 100px;
  height: 100px;
  background: #001F3F;
  color: #7FDBFF;
  position: absolute;
  top: 10px;
  left: 10px;
}

<div id="container">
  Hover me and wait for a dark overlay.
</div>

The chromium issue you linked to, Issue 26723: Mouse cursor doesn't change when mouse-idling, seems quite active at the moment, so hopefully this kind of workaround won't be required for long.

Still get this problem on Chrome 67. Beware the cursor doesn't update if the page doesn't have keyboard focus (e.g. press F12 and cursor *doesn't* change). Secondly the cursor wouldn't change if a div moves underneath a stationary mouse pointer. Dirty fix: http://jsbin.com/qahuqa/1 - open and put the mouse pointer near the top left: the CSS cursor is updated when the green box goes underneath the mouse pointer. Now press F12 and the cursor is *not* updated (because devtools has focus). From devtools Elements tab, right click, delete
and cursor doesn't update. — robocat, Jun 11 '18 at 02:44

score 2 · Answer 2 · answered May 11 '15 at 20:19

Hmm this is interesting. Either way, triggering a change in the body's cursor, seems to do the trick in Chrome v42:

setTimeout(function(){
    var div = document.getElementById('d');
    div.innerHTML = div.innerHTML + '<div class="curs">World</div>';    

    document.body.style.cursor = 'default';

}, 5000);

Force Chrome cursor update when mouse-idling vanilla javascript

2 Answers2

Linked