From 393d4d77f03b015e2c15be19642cdd01364a3153 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Thu, 15 Oct 2026 09:37:42 -0700 Subject: 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 carried will-change: transform (for the pinch), a full-size layer each. Now a slide's 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. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Fable 5.1 Claude-Session: https://claude.ai/code/session_01J1Kon8bxJoHRpJdSzshCkp --- src/style.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'src/style.css') 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; } -- cgit v1.2.3