[MV] Custom cursors not working in browsers

[Ellie]

I am using a plugin, which works in game, but not when played in a browser.

The plugin: http://mvplugins.tordamian.com/plugins/mouse-system-ex/

But that is not important as the line in question is this:

.container {
cursor: url("../img/cursors/default.png") 0 0, default;
}

Firefox, Edge and Chrome all fail to perform this CSS rule. Firefox states:

"Invalid property value".

A google shows multiple people getting this error not in RPG Maker but in web browsers in general, but after reading dozens of them I cannot find a single answer, nobody seems to know what is going on.

As I say it works completely fine when playing the RPG maker game as a standalone.

 

[Xilef]

Have you verified that the path is correct and that your server has read access of that path? Could be your root directory on the web deployment is different to the offline deployment.
See if you can access "../img/cursors/default.png" from the browser. Better yet, check if it's loading in the browser sources in developer tools.

Strangely, if a CSS url fails it should cascade and use the comma, the invalid property value suggests that "default" is not working for you - unless browsers report failed cascades? Perhaps rename "default" to "auto"?

I've also read that CSS cursors will fail for large images (anything above 32px) on some browsers; try using GIF format and 24px sized custom cursor.

 

[Ellie]

Randomly and for seemingly no reason, it now works (for now); however the debugger still gives me the "invalid property value" warning. No failed cascades, just this warning.