Skip to main content
3 of 5
Update for ease of debugging in the chromium issue
Kaiido
  • 135.6k
  • 3
  • 25
  • 33

Testing a bug with Chrome (at least in macOS) where requestAnimationFrame fires far faster than screen refresh rate when scrolling if an other StackSnippet is running.
I unfortunately can't make a min-repro outside of StackExchange, so here it is...


Steps to reproduce:

  • Run the first snippet, check the logged values. On a 60Hz monitor, they should be around 60FPS everywhere.
  • Start scrolling the main page. The values may start changing a bit (though normally only min should).
  • Run the second snippet and scroll back to the first one. See how max goes crazy out with numbers like 5,000 or 10,000FPS (I believe the rounded value is due to performance.now()'s min precision, thanks Spectre). Checking the rAF timestamp in these frames gives us a difference of 0: multiple callbacks did fire in a single frame).

debugger; // apparently the code would be ran in both iframes?
const store = [];
let min = Infinity;
let max = -Infinity;
let lastRaf;
let rafID;
// start after everything warmed up
setTimeout(() => rafID = requestAnimationFrame(measure), 500);
function measure(rafTime) {
  // testing observations from Comment 7
  // make sure we have only one rAF(measure) scheduled at a time
  if (checkbox.checked) {
    cancelAnimationFrame(rafID);
  }
  const now = performance.now();
  if (store.length) {
    const diff = +(1000 / (now - store[store.length-1]));
    max = Math.max(diff, max);
    min = Math.min(diff, min);
    if(diff>1000) {
      console.log("timestamp-diff", rafTime - lastRaf);
    }
  }
  lastRaf = rafTime;
  store.push(now);
  if (store.length > 10) {
    store.shift();
  }
  const diffs = store.map((t,i,a) => (a[i+1]||t)-t);
  const sum = diffs.reduce((s,t) => s+t, 0);
  const avg = sum / (diffs.length - 1);
  log.textContent = `average: ${(1000 / avg).toFixed(2)}FPS
maximum: ${max.toFixed(2)}FPS
minimum: ${min.toFixed(2)}FPS`;
  rafID = requestAnimationFrame(measure)
}
.as-console-wrapper { max-height: 110px !important; }
<label><input type=checkbox id=checkbox> Cancel previous animation frame callback</label>
<pre id=log></pre>

<h1>hello</h1>

Kaiido
  • 135.6k
  • 3
  • 25
  • 33