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.

Is your body height and width 100% maybe there are some pixels out of body. Try to set css cursor:none to html tag too — Durim Jusaj, Jan 11 '16 at 09:34
Like I said in description, `cursor: none` is set for body and html tags. — swolfish, Jan 11 '16 at 09:41
does the cursor show up in specific areas or is the reappearance random? — Aziz, Mar 03 '16 at 12:51
@sebastianbrosch Of course, already done. This is some NW.js specific issue. — swolfish, Mar 03 '16 at 14:00
@sscotti Not needed, as this is NW.js specific issue, all is fine in browsers (fullscreen) and xulrunner. — swolfish, Mar 03 '16 at 14:02
@swolfish Actually it is needed. We are here guessing what you can do in `html` or `body` or check `margin`, etc., it would be much easier if you showed us your code. — Cthulhu, Mar 03 '16 at 14:05
I don't think margin or padding has any effect on this. see this demo: https://jsfiddle.net/azizn/nzpuhr40/ — Aziz, Mar 03 '16 at 14:11

Aziz · Answer 1 · 2016-03-03T14:09:36.130

3

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/

edited Mar 03 '16 at 14:09

answered Mar 03 '16 at 14:02

Aziz

7,187
3
24
51

Thanks for the nice explanation, but the problem is in NW.js as it somehow overrides the style or better said ignores. – swolfish Mar 03 '16 at 15:15
It could override with another !important rule which has more specificity. If you have a live demo I can look at it and see what's causing this. – Aziz Mar 03 '16 at 15:21
As I said in description, all our applications have this issue with node-webkit, in the browsers and xulrunner fullscreen everything is ok. But, thanks. ;) – swolfish Mar 03 '16 at 15:35
1

related: http://stackoverflow.com/questions/23936567/nodewebkit-app-hide-cursor tell me if that JS line fixes your problem `document.body.style.cursor = 'none';` – Aziz Mar 03 '16 at 18:00
Unfortunately, nothing changed. :( – swolfish Mar 03 '16 at 19:25

score 1 · Answer 2 · answered Mar 09 '16 at 11:17

1

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.

answered Mar 09 '16 at 11:17

Darko Riđić

362
2
17

Cannot completely remove mouse cursor in nw.js app

2 Answers2