From 35feb53c50cf5662aca40e9af5a0547e36297631 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Tue, 13 Oct 2026 18:32:23 +0000 Subject: Pager glide: land on the slide itself, no overshoot and snap-back; quicker The glide aimed at n x the scroller's height, but a post is 100dvh, a hair off it on a phone; the error grew post by post until it landed past the slide and the snap yanked it back. It now aims at the measured position of the next slide. Faster too: at most 170ms (lands in ~195ms from lift-off). Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01KPw21NEpWeTGu6swVASmBt --- tools/pager-tap-slop-test.js | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) (limited to 'tools') diff --git a/tools/pager-tap-slop-test.js b/tools/pager-tap-slop-test.js index b0bd339..bcc790c 100644 --- a/tools/pager-tap-slop-test.js +++ b/tools/pager-tap-slop-test.js @@ -132,7 +132,29 @@ try { await page.evaluate(() => { window.__landed = new Promise((res) => { const t0 = performance.now(); const look = () => { const s = [...document.querySelectorAll('.mp-slide')].find((x) => { const r = x.getBoundingClientRect(); return Math.abs(r.top) < 1 && Math.abs(r.left) < 1; }); if (s && !s.getAttribute('data-k').endsWith('/tall.webm')) res(Math.round(performance.now() - t0)); else if (performance.now() - t0 > 2000) res(-1); else requestAnimationFrame(look); }; requestAnimationFrame(look); }); }); await page.touchscreen.touchEnd(); const ms = await page.evaluate(() => window.__landed); - check('a swipe lands on the next post within 300ms', ms > 0 && ms <= 300, ms + 'ms'); + check('a swipe lands on the next post within 250ms', ms > 0 && ms <= 250, ms + 'ms'); + + console.log('\n[no overshoot: a post not quite a screen tall, as 100dvh can be on a phone]'); + await page.addStyleTag({ content: '.mp-group, .mp-tail { height: calc(100dvh + 12px) !important; }' }); + await page.evaluate(() => { document.querySelector('.mp-scroll').scrollTop = 0; }); + await sleep(600); + // every frame's scroll, from the finger lifting until well after it lands + const glide = async () => { + await page.touchscreen.touchStart(195, 650); + for (let i = 1; i <= 8; i++) { await page.touchscreen.touchMove(195, 650 - 40 * i); await sleep(16); } + await page.evaluate(() => { const sc = document.querySelector('.mp-scroll'); window.__trace = []; const t0 = performance.now(); const rec = () => { window.__trace.push(sc.scrollTop); if (performance.now() - t0 < 900) requestAnimationFrame(rec); }; requestAnimationFrame(rec); }); + await page.touchscreen.touchEnd(); + await sleep(1100); + return page.evaluate(() => { const sc = document.querySelector('.mp-scroll'); const tops = [...sc.querySelectorAll('.mp-group, .mp-tail')].map((g) => g.getBoundingClientRect().top); return { trace: window.__trace, off: Math.min(...tops.map(Math.abs)) }; }); + }; + for (let n = 1; n <= 2; n++) { + const g = await glide(); + const end = g.trace[g.trace.length - 1]; + const past = Math.max(...g.trace.map((x) => x - end)); + const back = g.trace.some((x, i) => i && x < g.trace[i - 1] - 0.5); + check('swipe ' + n + ': straight on to the post, never past it and back', past <= 1 && !back, g.trace[0].toFixed(1) + '→' + end.toFixed(1) + ', past by ' + past.toFixed(1) + 'px' + (back ? ', moved back' : '')); + check('…resting square on it', g.off < 1, g.off.toFixed(2) + 'px off'); + } check('no page errors', errs.length === 0, errs.slice(0, 2).join(' | ')); } finally { await browser.close(); server.stop(true); } console.log(ok ? '\n✅ a little movement is still a tap' : '\n❌ failed'); -- cgit v1.2.3