Mouse cursor set using jQuery/CSS not changing until mouse moved

Question

In my code I use the jQuery/CSS to set and unset the 'wait' mouse cursor with the following code:

  function setWaitCursor() {
    $('body').css('cursor', 'wait');
  }

  function setDefaultCursor() {
    $('body').css('cursor', '');
  }

I use this code to change the mouse cursor for a long operation:

setWaitCursor();

... do stuff that takes a few seconds ...

setDefaultCursor();

This code doesn't seem to work unless you move the mouse, however (at least for Chrome on Win 10). If the mouse is not moved after setDefaultCursor is called, the cursor displays the 'wait' cursor until the mouse is moved (or vice versa).

Example: https://jsfiddle.net/antonyakushin/0jv6rqkf/

In this fiddle, the cursor changes for 2 seconds after the link is clicked. If you don't move the mouse when you click the link, the cursor does not change.

What is the best way to resolve this issue, so that even if the mouse is not moved the cursor is changed?

Answer 1

Although this is not the answer to this specific problem, this behavior can happen:

• On Chrome
• With DevTools open (which is very likely, in order to debug this issue)

The solution is simply to close the Chrome DevTools.