Firefox not hiding cursor using cursor: none;

Question

I've made a simple demo here: https://jsfiddle.net/bwmgazfx/1/

The line of CSS works in Chrome and IE11.

*, html { cursor: none !important; }

In Chrome and IE11 the cursor is hidden, but in Firefox (version 60)the cursor sometimes hides when you hold the mouse button down but otherwise stays visible. I know that cursor: none; works in Firefox but I can't seem to track down the problem as to why it's not being hidden.

My question is, why is the cursor not hidden in Firefox 61?

Answer 1

Your CSS is correct, however, some browsers (your case FireFox) will still show the cursor if the document height is not filled 100%

Adding below to your CSS will fix this.

html, body {
  height: 100%;
}

---

var x = null;
var y = null;

document.addEventListener('mousemove', onMouseUpdate, false);
document.addEventListener('mousemove', onMouseUpdate, false);
document.addEventListener('mousedown', onClickMouse, false);
document.addEventListener('mouseup', onReleaseMouse, false);

var $mousePointer = document.getElementById('mouse-pointer');

function onMouseUpdate(e) {
    x = e.pageX;
    y = e.pageY;
    
    $mousePointer.style.top = y + "px";
    $mousePointer.style.left = x + "px";
}

function onClickMouse(e) {
    $mousePointer.style.transform = "matrix(0.75, 0, 0, 0.75, 0, 0)";
}

function onReleaseMouse(e) {
    $mousePointer.style.transform = "matrix(1, 0, 0, 1, 0, 0)";
}

html, body {
  height: 100%;
}

*, html {
  cursor: none;
}

body {
    background-image: url(tile.jpg); 
    background-repeat: repeat;
}

#mouse-pointer { 
    width: 12px; 
    height: 12px; 
    position: absolute; 
    background-color: red; 
    border-radius: 50%;
    transform: matrix(1, 0, 0, 1, 0, 0);
    transition: transform 0.4s;
}

<div id="mouse-pointer"></div>