Le pointeur de la souris ne reste pas caché sur le chrome fullscreen div

Je voudrais faire un élément HTML fullscreen (un div), et que le pointeur reste caché. Cela semblerait simple (définissez cursor:none sur la div quand il devient en plein écran), mais cela ne fonctionne pas correctement dans tous les navigateurs.Le pointeur de la souris ne reste pas caché sur le chrome fullscreen div

L'extrait ci-dessous fonctionne très bien pour Firefox, mais dans Chrome 56/Mac OSX, le pointeur de la souris réapparaît après un certain temps (généralement entre 1 et 60 secondes).

Existe-t-il un moyen de navigateur croisé fiable pour masquer le pointeur de la souris en mode plein écran?

<!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>

Autres notes

J'ai essayé de placer cursor:none sur un élément différent de ce qui sera fait plein écran (comme un div enfant), mais cela aussi n'a pas aidé. L'API de verrouillage du pointeur semble être trop lourde, et nous préférons ne pas avoir à demander une autorisation supplémentaire pour ce qui semble être simple à faire en HTML/CSS.

références de bogues du navigateur

Seuls les bogues des navigateurs pertinents semblaient liés à la vidéo. Cela se passe sans vidéo - juste un div statique immuable.

Par rapport FF 51 et Chrome 56 sur Mac OS X.

Source

2017-02-27 abought

1) Le curseur peut être une image que vous voulez qu'il soit, en utilisant les déclaration:

cursor: url([URI]), auto;

2) En base-64 encoding, un GIF simple pixel transparent a l'URI des données suivantes:

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

Mettre ces deux ensemble, nous pouvons transformer le curseur en un GIF simple pixel transparent lorsqu'il se trouve sur un élément donné:

Exemple de travail:

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

<div></div>

Source

2017-02-28 14:24:14 Rounin

Intéressant. Je ne suis pas sûr de savoir pourquoi la résolution de l'image résout ceci (surtout quand l'alternative était 'cursor: none'), mais cela semble aider dans les tests préliminaires. Un problème étrange avec une réponse étrange, peut-être, mais ... Merci! – abought

Le pointeur de la souris ne reste pas caché sur le chrome fullscreen div

Répondre

Questions connexes