Document: visibilitychange event

The visibilitychange event is fired at the document when the content of its tab have become visible or have been hidden.

Bubbles Yes
Cancelable No
Interface Event
Event handler property onvisibilitychange

Usage notes

The event doesn't include the document's updated visibility status, but you can get that information from the document's visibilityState property.

Safari doesn’t fire visibilitychange as expected when the value of the visibilityState property transitions to hidden; so for that case, you need to also include code to listen for the pagehide event.

Examples

This example begins playing a music track when the document becomes visible, and pauses the music when the document is no longer visible.

document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === 'visible') {
    backgroundMusic.play();
  } else {
    backgroundMusic.pause();
  }
});

Specifications

Specification Status Comment
Page Visibility (Second Edition)
The definition of 'visibilitychange' in that specification.
Recommendation

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
visibilitychange eventChrome Full support 33
Full support 33
Full support 13
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Edge Full support 12
Notes
Full support 12
Notes
Notes The onvisibilitychange attribute was not supported until Edge 18. To listen to this event in earlier versions of Edge, use document.addEventListener('visibilitychange', function() {});.
Firefox Full support 56IE Full support 10
Notes
Full support 10
Notes
Notes The onvisibilitychange attribute is not supported in IE. To listen to this event, use document.addEventListener('visibilitychange', function() {});.
Opera Full support 12.1
Notes
Full support 12.1
Notes
Notes Doesn't fire the visibilitychange event when the browser window is minimized, nor when hidden is set to true.
Safari Partial support 7
Notes
Partial support 7
Notes
Notes 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 WebKit bugs 116769, 151234, 151610, and 194897.
Notes The onvisibilitychange attribute was not supported until Safari 10.1. To listen to this event in earlier versions of Edge, use document.addEventListener('visibilitychange', function() {});.
WebView Android Full support 4.4.3Chrome Android Full support 33Firefox Android Full support 56Opera Android Full support 12.1
Notes
Full support 12.1
Notes
Notes Doesn't fire the visibilitychange event when the browser window is minimized, nor when hidden is set to true.
Safari iOS Partial support 7
Notes
Partial support 7
Notes
Notes 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 WebKit bugs 116769, 151234, 151610, and 194897.
Notes The onvisibilitychange attribute was not supported until Safari iOS 10.3. To listen to this event in earlier versions of Edge, use document.addEventListener('visibilitychange', function() {});.
Samsung Internet Android Full support 2.0

Legend

Full support  
Full support
Partial support  
Partial support
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

See also