From 25832dd58fd9a79532e2db6b1b91498217173a9f Mon Sep 17 00:00:00 2001 From: jessikitty Date: Mon, 22 Jun 2026 09:53:36 +1000 Subject: [PATCH] Keep WebP animating on iOS by attaching the source img to the DOM iOS pauses animation on a detached , so the CanvasTexture sampled a frozen frame. Attach the img hidden off-screen (opacity 0.01) so WebKit keeps advancing the WebP; remove it on clear. --- public/preview.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/public/preview.html b/public/preview.html index 07a6747..0cf9e65 100644 --- a/public/preview.html +++ b/public/preview.html @@ -253,6 +253,10 @@ // the texture animates and transparency is preserved. const img = document.createElement('img'); img.crossOrigin = 'anonymous'; img.src = image; + // iOS pauses animation on a detached , so attach it hidden off-screen + // to keep the WebP advancing. We sample its current frame into the canvas. + img.style.cssText = 'position:fixed;left:-99999px;top:0;width:64px;height:64px;pointer-events:none;opacity:0.01;'; + document.body.appendChild(img); const cnv = document.createElement('canvas'); cnv.width = 256; cnv.height = 256; const ctx = cnv.getContext('2d'); @@ -301,6 +305,7 @@ function clearGhost() { if (!current) return; if (current.userData.vidEl) { try { current.userData.vidEl.pause(); current.userData.vidEl.src = ''; } catch {} } + if (current.userData.animImg) { try { current.userData.animImg.remove(); } catch {} } scene.remove(current); current = null; }