Search code examples
javascriptcsshtmlgoogle-chromefullscreen

Mouse pointer not staying hidden on chrome fullscreen div

I would like to make an HTML element fullscreen (a div), and have the pointer remain hidden.

This would seem straightforward (set cursor:none on the div when it becomes fullscreen), but it is not working correctly across browsers.

The snippet below works fine for Firefox, but in chrome 56/ Mac OSX, the mouse pointer reappears after some time (usually within 1-60 seconds).

Is there a reliable cross-browser way to hide the mouse pointer while fullscreen?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fullscreen mouse pointer</title>

    <style>
        .is-fullscreen {
            cursor: none;
            width: 100%;
            height: 100%;;
            background-color: white;
        }
    </style>
</head>
<body>

<div id="gofull">
FULLSCREEN AREA
</div>

<button onclick="makeFS()">Make fullscreen</button>


<script>
    // Button to make a div fullscreen and add relevant style in that case
    function makeFS() {
        // Get FS element, add class, and go fullscreen
        var el = document.getElementById("gofull");
        el.classList.add('is-fullscreen');
        if (el.requestFullscreen) {
            el.requestFullscreen();
        } else if (el.msRequestFullscreen) {
            el.msRequestFullscreen();
        } else if (el.mozRequestFullScreen) {
            el.mozRequestFullScreen();
        } else if (el.webkitRequestFullscreen) {
            el.webkitRequestFullscreen();
        } else {
            console.log('Your browser does not appear to support fullscreen rendering.');
        }
    }

</script>

</body>
</html>

Other notes

I have tried setting cursor:none on a different element than what gets made fullscreen (such as a child div), but this also did not help.

The pointer lock API seems like it would be massive overkill, and we'd rather not have to request an additional user permission for what seems like it should be simple to do in HTML/CSS.

Browser bug references

Only relevant browser bugs seemed video-related. This happens without video- just a static unchanging div.

Compared FF 51 and Chrome 56 on Mac OS X.

Solution

  • 1) The cursor can be any image you want it to be, using the declaration:

    cursor: url([URI]), auto;

    2) In base-64 encoding, a transparent single-pixel gif has the following Data URI:

    data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

    Putting these two together, we can turn the cursor into a transparent single-pixel gif when it hovers over any given element:

    Working Example:

    div {
width: 100px;
height: 100px;
background-color: rgb(255,0,0);
cursor: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7), auto;  
}
    <div></div>