Media pager: a picture flies in as the feed's copy and is sharpened at rest; one zoom layer, not one per slide. A flight through the pager stuttered on the phone (Adam, 2026-10-16: "a bit of choppiness as they scroll"): every slide within a screen and a half loaded its picture's ORIGINAL as it passed — camera files of several megapixels, decoded on the main thread and uploaded as textures mid-flight — and every slide's <img> carried will-change: transform (for the pinch), a full-size layer each. Now a slide's <img> starts on the copy the feed painted (1100px wide, decoded already: mediaReady's thumb), or the server's copy (pic.webp s=col, cached at the CDN), or failing both the original (onError falls back to it too); decoding async. The slide at rest is sharpened a moment after landing (pagerSharpen: the original fetched and decoded aside, then swapped in — same box, same aspect), so a pinch has the detail, and a slide paged past costs nothing. Only the current slide (mp-cur, set in pager.arrive) has the layer. tools/pager-sharpen-test.js (three 4-megapixel pictures: every slide opens on a blob copy, the one on screen alone has will-change, it is sharpened to the original within a moment while the others keep their copies, ArrowDown moves the layer and sharpens the next); feed-picture-pager, pager-resize, pager-wheel, thread-pager and pager-swipe-fly tests pass.

Co-Authored-By: Claude Fable 5.1 <[email protected]>
Claude-Session: https://claude.ai/code/session_01J1Kon8bxJoHRpJdSzshCkp

2 files changed, 34 insertions, 3 deletions

diff --git a/src/features/messages.js b/src/features/messages.js
index a6f49bb..d5da326 100644
--- a/src/features/messages.js
+++ b/src/features/messages.js
@@ -12267,10 +12267,19 @@ export function messagesFeature(ctx) {
   function pagerSlide(it) {
     const { ev, url } = it;
     const video = pager.kind === 'videos';
+    // A picture flies in as the feed's copy of it (1100px wide, decoded
+    // already if the feed painted it; else the server's, cached at the CDN)
+    // and is sharpened to the original once it comes to rest (pagerSharpen).
+    // Originals as they passed — camera files, several megapixels each —
+    // decoded on the main thread and were uploaded as textures mid-flight,
+    // and the flight stuttered (Adam, 2026-10-16: "a bit of choppiness as
+    // they scroll"). A copy that fails falls back to the original.
+    const quick = !video && !/\.gif(\?|$)/i.test(url) ? (mediaReady.get(url) || {}).thumb || serverPic(url, 'col') || url : url;
     const media = video
       ? h('video', { class: 'mp-media', 'data-src': url, loop: true, playsinline: true, preload: 'none',
           poster: videoThumbs.get(url) || posterOf(ev, url) || (videoInfo.get(url) || {}).image || serverThumb(url) })
-      : h('img', { class: 'mp-media', 'data-src': url, alt: '', draggable: 'false' });
+      : h('img', { class: 'mp-media', 'data-src': quick, 'data-full': url, alt: '', draggable: 'false', decoding: 'async',
+          onError: (e) => { const m = e.currentTarget; if ((m.getAttribute('src') || '') !== url) { m.setAttribute('data-src', url); m.setAttribute('src', url); } } });
     const caption = mediaCaption(ev);
     const stop = (fn) => (e) => { e.stopPropagation(); fn(e); };
     const slide = h('div', { class: 'mp-slide', 'data-k': mediaKey(it) },
@@ -12393,6 +12402,22 @@ export function messagesFeature(ctx) {
     const m = slide.querySelector('.mp-media');
     if (m && !m.getAttribute('src')) m.setAttribute('src', m.tagName === 'VIDEO' ? playSrc(m.getAttribute('data-src')) : m.getAttribute('data-src'));
   }
+  // The slide at rest gets its picture's original — fetched and decoded
+  // aside first, then swapped in (same box, same aspect: nothing moves) —
+  // a moment after landing, so a quick page past it costs nothing.
+  function pagerSharpen(slide) {
+    const m = slide && slide.querySelector('img.mp-media');
+    const full = m && m.getAttribute('data-full');
+    if (!full || m.getAttribute('src') === full || m._sharp) return;
+    m._sharp = setTimeout(() => {
+      m._sharp = 0;
+      if (!pager || pager.cur !== slide) return;
+      const im = new Image();
+      im.decoding = 'async';
+      im.onload = () => { const go = () => { if (pager && m.isConnected && m.getAttribute('src') !== full) { m.setAttribute('data-src', full); m.setAttribute('src', full); } }; (im.decode ? im.decode().then(go, go) : go()); };
+      im.src = full;
+    }, 300);
+  }
   function pagerRelease(slide) {
     const m = slide.querySelector('video.mp-media');
     if (m && m.getAttribute('src')) { try { m.pause(); m.removeAttribute('src'); m.load(); } catch {} }
@@ -12908,9 +12933,12 @@ export function messagesFeature(ctx) {
         if (v && pager.curAt) { const secs = (Date.now() - pager.curAt) / 1000; dwell = dwell ? dwell * 0.7 + secs * 0.3 : secs; }
         if (pagerSource() && video) el.classList.remove('show');
       }
+      if (pager.cur) pager.cur.classList.remove('mp-cur');
+      slide.classList.add('mp-cur'); // (the one with the layer for a pinch: style.css)
       pager.cur = slide;
       pager.anchor = slide;
       pager.curAt = Date.now();
+      pagerSharpen(slide);
       pagerArrows(slide);
       pagerPosition();
       if (pager.fromFeed) { const row = feedNow().notes.find((x) => x.id === slide._rowId); markSeen(row || slide._ev); }
diff --git a/src/style.css b/src/style.css
index a877e99..15fe4a6 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1505,8 +1505,11 @@ body::after {
 .mp-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .38); box-shadow: 0 0 3px rgba(0, 0, 0, .5); transition: background .15s, transform .15s; }
 .mp-dots i.on { background: #fff; transform: scale(1.15); }
 .mp-media { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-select: none; }
-/* a picture pinches to zoom (attachZoom); one finger at 1× is the pager's swipe */
-.mp-slide img.mp-media { touch-action: pan-x pan-y; transform-origin: center center; will-change: transform; }
+/* a picture pinches to zoom (attachZoom); one finger at 1× is the pager's swipe.
+   Only the slide at rest gets its own layer for that: one on every picture
+   kept a full-size texture per slide, and a flight past them stuttered. */
+.mp-slide img.mp-media { touch-action: pan-x pan-y; transform-origin: center center; }
+.mp-slide.mp-cur img.mp-media { will-change: transform; }
 /* nothing but the picture until a tap */
 .mp-meta, .mp-top { opacity: 0; pointer-events: none; transition: opacity .18s; }
 .media-pager.show .mp-meta, .media-pager.show .mp-top { opacity: 1; pointer-events: auto; }