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 <[email protected]>
Claude-Session: https://claude.ai/code/session_01KPw21NEpWeTGu6swVASmBt

1 files changed, 23 insertions, 1 deletions

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');