25-second countdown loses accuracy when the tab loses focus in Microsoft Edge

Drive the countdown from a fixed deadline and recalculate the remaining time whenever the page renders or becomes visible; use tab visibility only to implement an explicit pause policy, never as the clock itself.

Single-player implementation

setInterval() is suitable for refreshing the display, but not for measuring elapsed time. Edge can throttle and coalesce JavaScript timers in background tabs; intensive throttling can reduce them to one execution per minute after five minutes in the background.^1^ A missed callback must therefore not represent a missed second.

Store an end timestamp and derive every display value from it:

const ROUND_MS = 25_000;
let endsAt = Date.now() + ROUND_MS;
let timerId;

function renderCountdown() {
  const remainingMs = Math.max(0, endsAt - Date.now());
  countdown.textContent = Math.ceil(remainingMs / 1000);

  if (remainingMs === 0) {
    clearInterval(timerId);
    finishRound();
  }
}

timerId = setInterval(renderCountdown, 100);
document.addEventListener("visibilitychange", renderCountdown);
renderCountdown();

When the player returns after three seconds, the next render immediately shows approximately 22 seconds rather than waiting for three delayed interval callbacks. Calculating against a fixed endpoint also prevents timer drift from accumulating when individual ticks are late.^2^

Use:

• Date.now() when the deadline must be serializable, persisted, or shared with a server.
• performance.now() for a local-only elapsed-time measurement that should not be affected by system-clock adjustments. Microsoft documents high-resolution browser time as not being subject to system clock skew or adjustments.^3^

For this game, Date.now() is the more practical basis because the same deadline model extends to multiplayer.

Decide the background-tab rule separately

There are two valid game policies:

1. Round continues while hidden
   Keep endsAt unchanged. On return, display the true remaining time—or finish the round if it expired. This is deterministic and maps cleanly to multiplayer.
2. Single-player round pauses while hidden
   Record when the document becomes hidden and extend endsAt by the hidden duration when it becomes visible:

let hiddenAt = null;

document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    hiddenAt = Date.now();
  } else if (hiddenAt !== null) {
    endsAt += Date.now() - hiddenAt;
    hiddenAt = null;
    renderCountdown();
  }
});

Pausing avoids penalizing an accidental switch, but it also lets a player pause deliberately. Apply a cap, such as one short pause per round, if that matters to scoring. Do not silently infer a pause from delayed interval callbacks.

Sleeping Tabs is separate from timer throttling. Edge’s documented default sleeping timeout is 15 minutes, with configurable values from 30 seconds to 12 hours; Energy Saver can apply a shorter timeout.^4^ It normally should not determine a 25-second round’s design—the deadline calculation remains correct even if execution stops and later resumes.

Multiplayer rooms and duels

For shared rounds, make the server authoritative:

1. The server chooses an absolute UTC deadline, such as roundEndsAt.
2. Send that same deadline and a round ID to every room member.
3. Each client displays max(0, roundEndsAt - estimatedServerTime).
4. On reconnection or visibility return, request or consume the current round state and recalculate immediately.
5. Have the server decide whether an answer was in time; do not trust the displayed client counter or the client’s clock.

SignalR is one supported option when using ASP.NET Core: it can push events to all connected clients or selected groups, including gaming scenarios.^5^ Send round state changes rather than broadcasting a decrement every second:

connection.on("RoundStarted", ({ roundId, endsAtUtcMs }) => {
  currentRoundId = roundId;
  endsAt = endsAtUtcMs - serverClockOffsetMs;
  renderCountdown();
});

connection.on("RoundEnded", ({ roundId }) => {
  if (roundId === currentRoundId) finishRound();
});

Estimate serverClockOffsetMs during connection and periodically refresh it, accounting for round-trip delay. The server deadline—not the arrival time of the “round started” message—keeps clients aligned when messages arrive at slightly different times.

A per-player hidden-tab pause should not be used in a competitive shared round: players would acquire different deadlines. If brief tab switches should be forgiven in multiplayer, define that as a server-side room rule applied consistently, rather than extending individual client timers.

References

1. Microsoft Edge Browser Policy Documentation ...
2. Looking for More Efficient Code - Microsoft Q&A
3. 1 Introduction
4. Microsoft Edge Browser Policy Documentation SleepingTabsTimeout
5. Overview of ASP.NET Core SignalR