隠れ

Document オブジェクト hidden 属性 (DOM), visibilityState 属性の値 hidden、visible (DOM)

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

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

[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] 文書可視性状態可視であるか隠れであるかは、 次のように判断されます >>36

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

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

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

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

[6] 当該 Document が直接含まれている閲覧文脈ではなく、最上位閲覧文脈によって決まります。
[5] DocumentdefaultViewnull なら、を返さなければなりません >>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] 隠れ状態は、可視状態とは違う動作となることがあります。

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

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

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

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

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

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

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

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

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

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

濫用

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

関連

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

歴史

[15] Page Visibility 仕様により追加されました。 WebKit では webkitHidden として実装されています WinIE では msHiddenFirefox では 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