agbb agbb - 2 days ago 6
Javascript Question

visibilitychange event is not triggered when switching program/window with ALT+TAB or clicking in taskbar

Basically, the problem is with the behaviour of the event "visibilitychange".

It's triggered:
- when i switch to a different tab inside the browser window


  • when i click in minimize / restore buttons for the browser window



(this is ok)

It's not triggered:
- when i switch to a different window/program using ALT+TAB


  • when i switch to a different window/program clicking on taskbar



(this SHOULD trigger, because, just like when minimizing, the window's visibility may change)




W3 Page Visibility API Documentation: http://www.w3.org/TR/page-visibility/

There is no definition of "page visibility" regarding ALT+TAB/program switching in the spec sheet. I'm guessing it has something to do in between the OS and the Browser.




TESTED IN




  • Browsers:
    Chrome 40.0.2214.115 m / Firefox 36.0.1 / Internet Explorer 11.0.9600.17107

  • OS: Windows 8.1






Is there a workaround to fix this behaviour? The implementation is fairly simple, I listen to the "visibilitychange" event using jQuery, and then in its callback, I check for the value of "document.visibilityState", but the problem is that the event is not firing when expected.

$(document).on('visibilitychange', function() {

if(document.visibilityState == 'hidden') {
// page is hidden
} else {
// page is visible
}
});


This can be done without jQuery too, but the ALT+TAB and taskbar switch hide/show expected behaviour is still missing:

if(document.addEventListener){
document.addEventListener("visibilitychange", function() {
// check for page visibility
});
}


I've also tried the ifvisible.js module (https://github.com/serkanyersen/ifvisible.js) but the behaviour is the same.

ifvisible.on('blur', function() {
// page is hidden
});

ifvisible.on('focus', function() {
// page is visible
});


I haven't tested in other browsers because if I can't make it work in Chrome on Windows I really don't care about the other browsers yet.

Any help or suggestion is in advance thanked.




UPDATE



I tried using different vendor prefixes for the event name (visibilitychange, webkitvisibilitychange, mozvisibilitychange, msvisibilitychange) but but still the event is not triggered when I switch to a different program in the taskbar or ALT+TAB, or even if I open the start menu thing in windows with the windows key, which covers the whole screen.

I can reproduce the exact same issue in Chrome, Firefox and Internet Explorer.

UPDATE #2



Here's a roundup post I wrote for this issue and a workaround in pure javascript to solve the encountered problems.

Answer

Here's a roundup post I wrote for this issue and a workaround in pure javascript to solve the encountered problems.

Comments