danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

worker-orbs: Firefox compositor keep-alive fixes post-hover 1fps slowdown (#935)

Browse source 
removing the always-on dash-card blob animation (for the Chrome GPU win) incidentally let
Firefox start throttling the worker-orb canvas's compositing to ~1fps after a header hover
re-layerizes the dashboard — Chrome never throttles it. re-add the 'keep the compositor warm'
effect cheaply: a 2px, ~invisible element running an infinite transform-only animation (zero
paint). gated behind CSS.supports('-moz-appearance') so it's Firefox-only; Chrome never gets
it. confirmed fix in Firefox/Zen.
This commit is contained in:
BoulderBadgeDad 2026-06-27 13:07:03 -07:00
parent c6caaaa599
commit 240dce0c1b
1 changed files with 18 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
webui/static/worker-orbs.js
View file

@ -97,6 +97,24 @@
dashboardHeader.appendChild(canvas);
ctx = canvas.getContext('2d');
// #935: on Firefox, a header hover re-layerizes the dashboard and the engine then
// throttles THIS canvas's compositing to ~1fps (Chrome never does this). The old
// always-on dash-card blob animation incidentally kept the compositor on the fast
// path; once that was removed for the Chrome GPU win, the throttle showed up. Re-add
// that "keep-alive" cheaply: a 2px, ~invisible element running an infinite transform-
// only animation (compositor work, zero paint). Firefox-only via the same feature
// gate the CSS uses — Chrome doesn't throttle and never gets this.
if (window.CSS && CSS.supports && CSS.supports('-moz-appearance', 'none')) {
const keepAlive = document.createElement('div');
keepAlive.className = 'worker-orb-ff-keepalive';
keepAlive.setAttribute('aria-hidden', 'true');
keepAlive.style.cssText = 'position:absolute;top:0;left:0;width:2px;height:2px;opacity:0.01;pointer-events:none;z-index:0;';
keepAlive.animate(
[{ transform: 'translateX(0)' }, { transform: 'translateX(1px)' }],
{ duration: 1500, iterations: Infinity, direction: 'alternate' });
dashboardHeader.appendChild(keepAlive);
}
WORKER_DEFS.forEach((def, i) => {
const el = headerActions.querySelector(def.container);
if (!el) return;