background detection

I was on Twitter (mistake, I know), and some people were concerned that chrome added a feature to detect when the window becomes hidden/visible. This was retweeted on my feed:

Today’s topic:

Web pages can now detect when Chrome’s window is covered by another windowhttps://t.co/F7crhNHmcU pic.twitter.com/ZLVNm13oNO

— Web Platform News (@WebPlatformNews) March 28, 2019

People were saying that you should stop using chrome because of this!

I'm not sure what the concern is?

But, I wrote some code to do this in all of the other browsers, too. I guess we should all quit the internet now (maybe not the worst idea)

The Code

var lastTime = null
var consecutiveTime = 0;

function update(time) {
  var delta = (time - lastTime) / 1000.0;
  lastTime = time;
  if(delta > 0.1) {
    consecutiveTime += delta;
    document.getElementById("look-time").textContent = consecutiveTime.toFixed(2);
  else {
    consecutiveTime = 0;

function start(time) {
    lastTime = time;


How it Works

The basic idea is that when you have another tab selected, or another window is blocking it, the requestAnimationFrame event stops firing (or happens much less frequently).

You can detect that by measuring the time between requestAnimationFrame events. It should be 60 Hz when it's in the foreground on most screens, but I'm leaving a margin of error and checking when it drops below 10 Hz. When it gets that slow, it's presumably running in the background (or your user is browsing on a potato)

Firefox still calls requestAnimationFrame events in the background, but much more slowly (once every couple seconds, it seems). To handle that, I'm summing up consecutive slow frames, rather than taking the most recent

btw, you looked away for 0 seconds.