Firefox Not Hiding Cursor Using Cursor: None;

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 hidd

Solution 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');

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

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

functiononReleaseMouse(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;
}

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