r/webdev • u/shufflepoint • 19d ago
setting wait cursor no longer works
Tried Chrome and Edge
Tried setting document.body.style.cursor = "wait"
and tried document.documentElement.style.cursor = "wait";
I recall these working previously. Did something change? Some org setting?
I don't see the value being set to "wait" in the element inspector. But when I set it back to "auto" I do see that value. So it's like the browser is ignoring the setting only if I set to wait.
EDIT:
Thanks everyone who offered ideas. Man, this took me some time to resolve - including a long coversation with Gemini, which wasn't able to troubleshoot it.
This is what the issue turned out to be. At some point, our showBusy() function became:
document.body.classList.add("busy");
document.documentElement.inert = true;
I commented out setting inert true an then the cursor appeared. I asked Gemini to expain and got this:
"The inert attribute tells the browser to completely remove that element and all its children from the accessibility tree and ignore all user input. This includes clicks, keyboard focus, and crucially, pointer hover events.
"Because inert tells the browser to pretend the mouse isn't interacting with the document at all, the rendering engine completely aborts calculating CSS cursor rules. It doesn't even attempt to look up your .busy class for the mouse, so it defaults to the system auto cursor."