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 suggestions?

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.

UPDATE #3

Edited to include a copy of the sourced blog post. (see accepted answer)