From dd0fb2c365054fe52cd3ad615f30819bdfc674df Mon Sep 17 00:00:00 2001 From: Bruno Postle Date: Sun, 26 Apr 2026 08:29:32 +0100 Subject: [PATCH] =?UTF-8?q?viewer:=20fix=20load=20transition=20=E2=80=94?= =?UTF-8?q?=20snapshot=20appears=20before=20navigation=20blank?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Show the canvas snapshot on the current page (z-index 9999) immediately before navigating, so the browser's between-pages blank is hidden behind the static image. Navigate without delay. Remove the body fadeIn animation that was making the snapshot on the new page invisible during the 0.2s fade-in, causing the visible blank-then-snapshot sequence. Co-Authored-By: Claude Sonnet 4.6 --- forgejo/custom/public/assets/viewer.html | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/forgejo/custom/public/assets/viewer.html b/forgejo/custom/public/assets/viewer.html index bfbeff1..bf14e08 100644 --- a/forgejo/custom/public/assets/viewer.html +++ b/forgejo/custom/public/assets/viewer.html @@ -69,8 +69,6 @@ pointer-events: none; } #status:empty { display: none; } - @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } - body { animation: fadeIn 0.2s ease; } #snapshot-overlay { position: fixed; inset: 0; top: var(--toolbar-h, 72px); z-index: 4; background: #1c1c1e center/contain no-repeat; @@ -357,14 +355,20 @@ function loadUrl(url) { if (rendererCanvas) { try { - sessionStorage.setItem("viewerSnapshot", rendererCanvas.toDataURL("image/jpeg", 0.6)); - } catch (_) { /* cross-origin or context-lost — skip */ } + const snap = rendererCanvas.toDataURL("image/jpeg", 0.6); + sessionStorage.setItem("viewerSnapshot", snap); + // Cover the 3D view with the snapshot NOW, before the page unloads, + // so the browser's navigation blank is hidden behind the static image. + const cover = document.createElement("div"); + cover.style.cssText = "position:fixed;inset:0;z-index:9999;" + + "background:#1c1c1e center/contain no-repeat"; + cover.style.backgroundImage = `url("${snap}")`; + document.body.appendChild(cover); + } catch (_) { /* context-lost or cross-origin — skip */ } } - document.body.style.transition = "opacity 0.15s"; - document.body.style.opacity = "0"; const pageUrl = new URL(window.location.href); pageUrl.searchParams.set("url", url); - setTimeout(() => { window.location.href = pageUrl.toString(); }, 150); + window.location.href = pageUrl.toString(); } urlInput.addEventListener("keydown", e => {