Skip to main content
(While we are at it - a new "answer" was posted.) [<http://english.stackexchange.com/questions/15953>]
Source Link
Peter Mortensen
  • 31.6k
  • 4
  • 22
  • 14

Testing a bug with Chrome (at least in macOS) where requestAnimationFrame fires far faster than screen refresh rate when scrolling if another Stack Snippet is running.
I

I unfortunately can't make a min-repro outside of Stack Exchange, so here it is...

  • Run the first snippet, check the logged values. On a 60Hz60 Hz monitor, they should be around 60FPS60 FPS 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,000FPS000 FPS (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).

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

  • 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).

Testing a bug with Chrome (at least in macOS) where requestAnimationFrame fires far faster than screen refresh rate when scrolling if another Stack Snippet is running.

I unfortunately can't make a min-repro outside of Stack Exchange, so here it is...

  • Run the first snippet, check the logged values. On a 60 Hz monitor, they should be around 60 FPS 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,000 FPS (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).
spelling of site names and features
Source Link
Heretic Monkey
  • 12.1k
  • 5
  • 49
  • 70

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

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...

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

Update for ease of debugging in the chromium issue
Source Link
Kaiido
  • 135.6k
  • 3
  • 25
  • 33

Testing a bug inwith 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...

debugger; // apparently the code would be ran in both iframes?
const store = [];
let min = Infinity;
let max = -Infinity;
// some "stabilizer" loop in order to avoid outliers
const loop = () =>let requestAnimationFrame(loop);
loop();lastRaf;
let lastRaf;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>

Testing a bug in 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...

const store = [];
let min = Infinity;
let max = -Infinity;
// some "stabilizer" loop in order to avoid outliers
const loop = () => requestAnimationFrame(loop);
loop();
let lastRaf;
// start after everything warmed up
setTimeout(() => requestAnimationFrame(measure), 500);
function measure(rafTime) {
  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`;
  requestAnimationFrame(measure)
}
.as-console-wrapper { max-height: 110px !important; }
<pre id=log></pre>

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...

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>
Now have an issue to link to + had a typo in the code.
Source Link
Kaiido
  • 135.6k
  • 3
  • 25
  • 33
Loading
Source Link
Kaiido
  • 135.6k
  • 3
  • 25
  • 33
Loading
Post Made Community Wiki by Kaiido