Cannot completely remove mouse cursor in nw.js app

Question

I'm using nw.js for html/css/js desktop app and cannot completely remove mouse cursor in full screen mode.

I've removed it by setting css properties cursor: none, margin: 0, padding: 0 on the body/html. And also toolbar: false and fullscreen: true are set in package.json. But the cursor is visible a few pixels on all the edges of screen (picture bellow).

Strange behaviour, does someone know how to completely remove it?

NOTE: This is just an issue in NW.js, as it works perfectly in all browsers and also in the xulrunner, as we migrated in the company from xulrunner to node-webkit (nw.js) all applications got this issue.

Answer 1

I suspect another element is applying cursor:auto, essentially overriding your CSS rule.

Consider the following basic example:

html, body {
  background:#000; color:#FFF;
  padding: 0; margin: 0;
  text-align: center;
  cursor:none;
}

div {
  margin:2em;
  padding:1em;
  background:#555;
  cursor:auto;
}

<div>
  <p>This div has cursor:auto</p>
</div>

As you can see, the element gets the normal cursor because it has a cursor:auto rule. Since you did not provide your code, I can't know exactly which element is getting the rule, you can inspect in the devtools to catch it. Otherwise, you can override ALL cursor rules with this CSS line:

* { cursor: none !important; }

And to see that in action:

html, body {
  background:#000; color:#FFF;
  padding: 0; margin: 0;
  text-align: center;
  cursor:none;
}

div {
  margin:2em;
  padding:1em;
  background:#555;
  cursor:auto;
}

* { cursor: none !important; }

<div>
  <p>This div has cursor:auto but gets overriden</p>
</div>

---

Edit: iframes

The cursor cannot be hidden in documents loaded through an iframe. The iframe would need to get that CSS rule locally.

See iframe demo: https://jsfiddle.net/azizn/rr7bsrc7/1/

Answer 2

I have also the same issue. I think the best solution for us would be to switch to Electron or wait until a stable version 0.13 of nw.js is released.