Widely available Supported across all major browsers. Safe to use in production.

Page visibility

The Document.hidden read-only property returns a Boolean value indicating if the page is considered hidden or not. This can be used to check whether the document is in the background or in a minimized window, or is otherwise not visible to the user.

The Document.visibilityState property provides an alternative way to determine whether the page is hidden.

Display and Navigation

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
hidden
33
12
18
7
33
7
visibilitychange_event

The visibilitychange event is fired at the document when its visibility status changes — for example, when the user switches browser tabs, navigates to a new page, minimizes or closes the browser, or on mobile, switches to a different app.
62
18
56
14.1
62
14.5
visibilityState

The Document.visibilityState read-only property returns the visibility of the document. It can be used to check whether the document is in the background or in a minimized window, or is otherwise not visible to the user.
33
12
18
7
33
7
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: webkit (13)
Notes 3 item(s)
Implementation note
  • Since Firefox 56 it also returns `true` on macOS when the window is completely hidden by another non-translucent application.
Removed
  • This feature was removed in a later browser version (52)
Compatibility
  • Available with a vendor prefix: moz (10)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: webkit (18)
Notes 4 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (62)
Implementation note
  • The `onvisibilitychange` event handler property is not supported.
Compatibility
  • Available with a vendor prefix: webkit (13)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (18)
Implementation note
  • The `onvisibilitychange` event handler property is not supported.
Notes 7 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (14.1)
  • This feature was removed in a later browser version (14)
  • This feature was removed in a later browser version (10.1)
Implementation note
  • Doesn't fire the `visibilitychange` event when navigating away from a document, so also include code to check for the `pagehide` event (which does fire for that case in all current browsers). See bug 116769, bug 151234, bug 151610, and bug 194897.
  • Before Safari 14, the event does not bubble, so `document.addEventListener('visibilitychange', ...)` works, but `window.addEventListener('visibilitychange', ...)` does not.
  • The `onvisibilitychange` event handler property is not supported.
Notes 4 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (62)
Implementation note
  • The `onvisibilitychange` event handler property is not supported.
Compatibility
  • Available with a vendor prefix: webkit (18)
Notes 7 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (14.5)
  • This feature was removed in a later browser version (14)
  • This feature was removed in a later browser version (10.3)
Implementation note
  • Doesn't fire the `visibilitychange` event when navigating away from a document, so also include code to check for the `pagehide` event (which does fire for that case in all current browsers). See bug 116769, bug 151234, bug 151610, and bug 194897.
  • Before Safari on iOS 14, the event does not bubble, so `document.addEventListener('visibilitychange', ...)` works, but `window.addEventListener('visibilitychange', ...)` does not.
  • The `onvisibilitychange` event handler property is not supported.
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: webkit (13)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (52)
Compatibility
  • Available with a vendor prefix: moz (10)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: webkit (18)

Syntax

JAVASCRIPT 
document.addEventListener("visibilitychange", () => {
  console.log(document.hidden);
  // Modify behavior…
});

Use cases

  • Using Page visibility

    The Document.

Cautions

  • May not be supported in older browsers.

Implementation notes

  • Some APIs require a secure context (HTTPS) or user activation. Check the requirements before use.

Related links