Fix article jumping under the reader after scrolling stops

[jonocodes]

Fixes the mobile report: "when I scroll an article and stop, after a second or two it bounces up or down a bit."

What was happening

The reading-progress save fires 1s after scrolling stops. It re-emits the article through the Dexie liveQuery, re-rendering ArticleScreen — and that re-render rebuilt the entire article DOM.

React 19 diffs dangerouslySetInnerHTML by object identity, not by the __html string (React ≤18 compared the string), and then assigns innerHTML unconditionally. ArticleComponent passed a fresh { __html: sanitize(...) } literal every render, so every re-render tore down and recreated every node.

Text was recreated at identical heights, so the rebuild was invisible. Images weren't: each <img> came back new and unloaded, and web.css styles article images as max-width: 100%; height: auto with no width/height attributes — so they collapsed to zero height until they decoded again. The page shrank, then sprang back. That's the bounce, and it's why it only happened on articles with images.

The same rebuild also discarded in-flight image downloads and restarted them from zero, which is why it was worst on a bad connection: images that are still fetched over the network had their downloads cancelled on every reading pause and could never finish. Partly self-inflicted.

Evidence

MutationObserver on the article container, across one progress save:

	childList mutations	image requests (4 images, 3 pauses)
before	[{removed: 243, added: 243}]	8
after	[]	4

Measured as where the reader's line of text sits on screen: −307px → 0px.

Changes

• src/components/ArticleComponent.tsx — the fix. Memoize the sanitized {__html} (now via Show inline video embeds (YouTube, Vimeo) in the reader #80's sanitizeArticleHtml) so its identity is stable and React leaves the DOM alone. Also stops re-sanitizing the whole article on every render, and stops video embeds reloading their player on every save.
• lib/src/ingestion.ts — record each image's real dimensions as width/height attributes, so the browser reserves the correct box before decode. resizeImage now reports the canvas's own (truncated) dimensions so the aspect ratio is exact. Stored image bytes are unchanged — only the reported numbers and the saved HTML's attributes.
• src/components/ArticleScreen.tsx — remove 5 leftover console.log calls that ran on every save in production.

Tests

tests/e2e/scroll-stability.spec.ts (9) and lib/__tests__/ingestion-image-dimensions.test.ts (3). Each new test was confirmed to fail without its fix rather than pass vacuously.

Coverage includes the root cause (no DOM rebuild on a progress save), the symptom (text must not move when a late image loads), no image re-downloads across reading pauses, plus fresh/resumed articles, live sync, mobile fling under 6× CPU throttle, viewport resize, and a second device writing conflicting progress mid-read.

That last one also pins something worth stating: the reading position is not re-applied mid-read. The restore is guarded to run once. A sync write moving progress from 45 to 12 under an active reader must leave the viewport untouched.

Full run: 310 unit tests, 46 e2e (articles/TTS/edit/ingestion/smoke), 9 scroll-stability. Typecheck clean; lint 0 errors.

Notes

• The image-dimensions change applies to newly saved articles; existing ones need a re-save. The memoization fix helps them immediately regardless — and scroll anchoring absorbs late-image growth once the DOM isn't being rebuilt (measured: 454px of compensation, text moved 0px), so the mid-read bouncing is fixed for existing articles too. The attributes mainly buy first-paint stability.
• Images whose download failed at save time used to keep their original remote URL. Add a fetch governor: dedupe, negative-cache and back off repeated proxy fetches #79 now swaps them for a local placeholder, so this only affects articles saved before Add a fetch governor: dedupe, negative-cache and back off repeated proxy fetches #79. The rest (legacy articles, retrying failed images) is tracked in Images that fail to download at save time stay remote forever #75.

🤖 Generated with Claude Code

[netlify]

✅ Deploy Preview for savrlist ready!

Name	Link
🔨 Latest commit	5fce191
🔍 Latest deploy log	https://app.netlify.com/projects/savrlist/deploys/6ac1e14de88c90000841510c
😎 Deploy Preview	https://deploy-preview-76--savrlist.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[jonocodes]

Merged main to resolve conflicts with #79 and #80.

The bug was still on main, and #80 made it worse. #80 moved sanitizing into sanitizeArticleHtml and allowed video-embed <iframe>s, but it still passed a new { __html } object on every render. So every progress save also recreated every embed and reloaded its player. On main's version of that line, 3 embeds were loaded 18 times across 3 reading pauses. The resolution keeps #80's sanitizer and memoizes its result, which brings it to 3 loads. A new scroll-stability test, progress save does not reload video embeds, covers this. It fails on main's version of the line and passes with the fix.

Adjusted for #79 (failed images become a local placeholder):

• The failed-download dimensions test now expects the placeholder and data-orig-src, and still checks that no width/height is written for an image whose size we never learned.
• The shared Jest mock of ~/utils/article/tools now includes a FetchError class. ingestion.ts checks e instanceof FetchError after a failed image download, and without the class that check throws. No existing test ran a failed download through ingestHtml, so this hadn't shown up. It only affects tests; in the app FetchError is a real class.
• Comments and changelog wording now say that only articles saved before Add a fetch governor: dedupe, negative-cache and back off repeated proxy fetches #79 still hold remote URLs for failed images.

Checked after the merge: 351 unit tests and 57 e2e tests (scroll-stability, #79's failed-image ingest, ingest, reader, edit, TTS, smoke) pass; typecheck is clean.