クロムのフルスクリーンのdivにマウスポインタが隠れていない

HTML要素をフルスクリーン（div）にして、ポインタを隠したままにします。クロムのフルスクリーンのdivにマウスポインタが隠れていない

これは簡単なようです（フルスクリーンになるとdivにcursor:noneを設定します）が、ブラウザ間で正しく機能していません。

以下のスニペットはFirefoxではうまく動作しますが、クロム56/Mac OSXではマウスポインターがしばらくしてから（通常1〜60秒以内に）再び表示されます。

フルスクリーン中にマウスポインタを隠す信頼性の高いクロスブラウザ方式はありますか？

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

その他注意事項

私は（そのような子のdivなど）フルスクリーン作られます何よりも、別の要素にcursor:noneを設定しようとしたが、これも助けにはなりませんでした。

ポインタロックAPIは、過度の過度な攻撃のように思えます。HTML/CSSで簡単にできるように見えるように、ユーザーの追加のアクセス権を要求する必要はありません。

ブラウザのバグ参照

のみ関連するブラウザのバグ映像関連のように見えました。これはビデオなしで起こります。静的で不変のdivです。

比べFF 51およびMac OS Xの

出典

2017-02-27 abought

1）上のクロム56カーソルを使用して、あなたはそれがにしたい任意の画像することができ宣言：

cursor: url([URI]), auto;

2）base-64 encoding、透明単一ピクセルGIFは、以下のデータURIを有する：

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

は、それが任意の所与の要素の上に置いたとき、我々は透明な単一ピクセルGIFにカーソルを変えることができ一緒にこれら二つを置きます。

実施例：

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

<div></div>

出典

2017-02-28 14:24:14 Rounin

興味深い。なぜイメージをインライン化してこれを解決するのかはわかりません（特に、代替が「カーソル：なし」の場合）が、予備テストで役立つようです。奇妙な答えで奇妙な問題は、おそらく、しかし...ありがとう！ – abought

クロムのフルスクリーンのdivにマウスポインタが隠れていない

答えて

関連する問題