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

1 files changed, 5 insertions, 2 deletions

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; }