fix: eliminate mobile bg flash — double rAF + will-change:opacity

new Image() onload fires when bytes are downloaded but GPU decode of the
blurred layer hasn't happened yet on mobile. Double rAF defers the opacity
swap until after the browser has actually painted the new background.
will-change:opacity keeps the layers on dedicated compositor layers so
the blur doesn't need to be recomputed on every opacity transition.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
HoneyandClaude Sonnet 4.6 committed 2026-04-28 09:52:02 +02:00
1 parent 23e8a7ddfb
commit c8c3670ca0
2 files changed
+4

No files matched your search

+3
View File
@@ -68,9 +68,12 @@ function _crossfadeNpBg(cv) {
const nextEl = document.getElementById(`np-bg-${nextId}`);
if (!currEl || !nextEl) return;
nextEl.style.backgroundImage = cv ? `url('${cv}')` : 'none';
// Double rAF: wait for browser to paint the new bg (GPU decode) before fading
requestAnimationFrame(() => requestAnimationFrame(() => {
nextEl.style.opacity = '1';
currEl.style.opacity = '0';
_npBgCurr = nextId;
}));
};
if (!cv) { doFade(); return; }
const img = new Image();
+1
View File
@@ -515,6 +515,7 @@ nav{flex:1;overflow-y:auto;padding:4px 10px}
filter:blur(60px) brightness(.35) saturate(1.4);
transform:scale(1.1);
transition:opacity .55s ease;
will-change:opacity;
z-index:0;
}