[2] Document オブジェクトの hidden 属性は、 文書が表示されているかを返します。

[16] Document オブジェクトの visibilityState 属性の値 hidden、 visible は文書が隠れていること、いないことをそれぞれ表します。

[17] これら2つの「hidden」の意味は若干異なっています。

仕様書

visibilityState 属性の値 hidden

[19] 最上位閲覧文脈に含まれている Document がまったく見えないなら visibilityState 属性は hidden を返さなければなりません。ただし >>7 の場合は visible を返して構いません。 >>18

[20] >>19 の規定からすると hidden 属性が真なら visibilityState 属性は必ず hidden になりそうなものですが、 >>11 の場合に unloaded という別の値が用意されています。また prerender という値も用意されています。 更に vendor prefix のついた値も認められており、厳密に解釈すると >>19 の規定に反してしまう可能性があります。 仕様書の例示には >>9、>>10、>>13 のみ挙げられています。

[32] その後の改訂でこの辺の規定は整理されています。

[29] 文書の可視性状態の値隠れhiddenは、 文書がまったく画面内にないことを表します >>28。

visibilityState 属性の値 visible

[23] 最上位閲覧文脈に含まれている Document がどこかの画面に一部分でも表示されているなら visibilityState 属性は visible を返さなければなりません。また >>7 の場合も visible で構いません。 >>18

[24] これは hidden が偽になる場合と同じである >>18 とわざわざ明記されています (>>19 については言及なし)。

[30] 文書の可視性状態の値可視visibleは、 文書の少なくても一部が可視状態であることを表します >>28。

可視性の決定

[45] 文書の可視性状態は、文書が閲覧文脈中にあり、 それが最上位閲覧文脈である時のみ定義されているようです。

[35] 文書の可視性状態が可視であるか隠れdocument.hiddenであるかは、 次のように判断されます >>36。

[49] つまり、最前面のタブ以外では、隠れとなります。[37] 事前レンダリングについては、そちらの項を参照。

[70] アクセシビリティーツールにしか言及がありませんが、 IME なども同様と思われます。

Document インターフェイス hidden 属性 (DOM)

[4] Document インターフェイスの hidden IDL属性は、 最上位閲覧文脈の文書が一部でも可視なら偽、 そうでないなら真を返します。

[6] 当該 Document が直接含まれている閲覧文脈ではなく、最上位閲覧文脈によって決まります。[5] Document の defaultView が null なら、真を返さなければなりません >>1。

[34] 本属性は歴史的なものであり、 visibilityState 属性を使うべきshouldです >>31。

[3] 取得時、文書が隠れているか決定する手順を実行しなければなりません >>31。 この属性は読み取り専用で、 boolean を返します >>31。

[33] 文書が隠れているか決定する手順steps to determine if the document is hiddenは、 可視性状態を決定する手順が visible を返すかどうかを返します >>31。

[7] 通常全画面で表示するようなアクセシビリティ・ツールもあったりしますから、 Webブラウザーが最小化されておらず他のアプリケーションに完全に隠れてしまっているような場合であれば偽を返しても構いません >>1。

[8] 例えば次の場合に真を返します。

[25] 値の変化のタイミングについては visibilitychange の項をご覧ください。

副作用

[52] 隠れ状態は、可視状態とは違う動作となることがあります。

  • [26] navigator.vibrate が無視されるかどうかは、 document.hidden 属性の値に依存する >>27 と以前はされていましたが、現在は可視性状態に依存する形に改められています。

[59] Chrome は非表示document.hidden状態のタブの活性文書も捨てる文書を捨てることがあるようです。

[51] 捨てる正確な条件はわかりませんが、一部 fetch が実行中でも平気で捨てるようで、 困ったものです。

[60] POST で作成されたページも勝手に捨てられて、 再表示できずにかわりに再読込を促すネットワークエラーが表示されるのも、 困ったものです。

[55] Webブラウザーは次のような点に注意が必要です。

[68] 非表示であっても、他の窓の文書から参照されていたり、 ワーカーや postMessage を通じて通信していたりすることがあります。 BroadcastChannel で通知を受け付けているかもしれません。 Webブラウザーはどの文書を捨てても問題が出ないか、慎重に判断する必要があります。

[71] Chrome は最前面のタブに表示していても窓が隠れている状態なら、 破棄してしまうことがあります。困ったもんです。。。

[73] Chrome は開発者コンソールを開いていても捨ててしまいます。 困ったものです。

[74] Chrome は捨ててしまうまでいかないまでも、 動画の再生を停止してしまうことがあります。 (音声の再生は継続されます。) Windows で画面撮影用のソフトウェアを使って Chrome の画面を録画記録しながらビデオ会議をしつつ、 表に他の画面を開いているような場合に、 (録画されてることを Chrome は検知し得ないので、 平気で動画再生を止めてしまい、) 音声のやり取りは続いているのに動画が真っ暗になってたりして、 ほんと困ります。。。

[75] Chrome は最前面の窓の最前面のタブですら捨てちゃうことあった! やばすぎ!

[76] その割にメモリー満杯近くなのになぜか破棄されない背景タブとかあって謎だよね。

濫用

[79] 可視性はしばしば悪意ある、あるいは設計が悪い Webアプリケーションによって乱用されています。

[80] Webブラウザーは、利用者の簡単な操作によって特定の Webサイトが可視性を失わせない (常に最前面表示であるかのように状態を伝える) ことで、 Webサイトの乱用に対処できるようにするべきです。

[77] Xユーザーのymrlさん: 「ブラウザバックで広告出るやつも嫌いなんだけど、それ以上にブラウザのタブがアクティブでなくなったとき全面広告に切り替わるやつが嫌い。たぶんvisibilitychangeイベントとdocument.visibilityStateでやってるやつ。いろんなページを見比べて調べ物してる時に集中力が分断されるので。」 / X, , https://x.com/ymrl/status/1824205065055506848

[78] 表示中タブではなくなったときに再生を停止する動画サイトは嫌がらせしてるとしか思えない。

関連

[14] 要素の hidden 属性とは関係ありません。

歴史

[15] Page Visibility 仕様により追加されました。 WebKit では webkitHidden として実装されています 。 WinIE では msHidden、 Firefox では mozHidden も実装されていました。

[65] Release Notes for Safari Technology Preview 17 | WebKit ( ()) https://webkit.org/blog/7071/release-notes-for-safari-technology-preview-17/

Fixed WebAudio to resume when moving from background to foreground tab (r208092)

[67] Background Tabs in Chrome 57  |  Web  |  Google Developers () https://developers.google.com/web/updates/2017/03/background_tabs

[69] Vibration API Recommendation errata · w3c/vibration@b844ba9 ( 版) https://github.com/w3c/vibration/commit/b844ba923d9a4c9b04398dd793011b5ace48f242

[72] 大山ゆっけ(蘇る鈴木佑輔)さんはTwitterを使っています 「Chromeが画面裏にあるウィンドウのアプリ動作を止めるという糞みたいな糞機能を実装したせいでブラウザゲーム複数同時進行勢から大量の悲鳴が上がっているという。」 / Twitter (, ) https://twitter.com/trinity_site/status/1455121637796241418