Phone: document scrolling in a tab, no live blur on the frosted screens, solid top strip (#445)

kayg commented

2026-10-17 04:25:44 +00:00

Owner

Refs #445, #476. Replaces #497.

What changed since #497

Phone list pages (Places, a list, Trash) scroll the DOCUMENT in a browser tab, through one shared adapter, packages/ui/src/lib/scroll.ts (the same Scroller as the chrome mockup's round 4, plus phoneDocScroll(), the one rule for "document or box"). The installed Home Screen app keeps its measured box; notes and Settings keep their fixed shell (the root scrolls only while data-edge="glass").
The current list page is in the flow and one large screen tall at least, so its own tint runs under Safari's toolbar; the pages beneath are fixed behind it, shifted up by the scroll they were left at, so Back finds the list where it was (checked in the simulator: scrolled 700, opened a note, Back, 700). The back button floats, with a blur ramp that appears only once rows are under it. The virtual list reads the window's scroll less where its box starts.
The bottom step ("bottom continues" at 430x932 webkit): the frosted layers (floor, picture copy, sky blur) now come in at once instead of fading in, so nothing is half there when a screenshot or a finger looks; and with the page's own tint running under the toolbar the floor adds none (it showed lighter, a double tint). I could not make the step appear again in isolation, so the cause is a half-finished fade; the fix removes the fade on the way in.
The backdrop keeps the kayg.org technique already in Backdrop.svelte/scroll-link.ts (document-height clipped surface, a layer counter-scrolled on a root scroll timeline, touch WebKit 26.4+ only, fixed fallback elsewhere); it now has a document that scrolls to follow.
Everything from #497: no live blur on the frosted screens (the picture blurred once, the screens only tint), a solid fixed top strip in the edge colour (Safari tab only), no bottom strip.

Tests (phone-bars, phone-edges, home-screen, safe-areas, pwa, glass, --no-deps, run one project at a time): chromium-390 440 passed; chromium-1440 6 passed; webkit-1440 4 passed; webkit-390 428 passed and 12 phone-bars tests that died with "Target page closed" (browser crashes under host load), rerun alone: 12 passed. Specs changed: a solid fixed layer at an edge must be the page colour; frosted screens have no bottom-strip equality check (their last row continues the one above).

Evidence is on #445 (simulator sheet, Safari tab, seed photo, light above and dark below). Not merged on purpose. Needs the real iPhone: the toolbar over a scrolled list, Back restoring the scroll, the top strip colour.

🤖 Generated with Claude Code

https://claude.ai/code/session_019QGa6qjALuHyi8H1naGp6b

Refs #445, #476. Replaces #497. **What changed since #497** - Phone list pages (Places, a list, Trash) scroll the DOCUMENT in a browser tab, through one shared adapter, `packages/ui/src/lib/scroll.ts` (the same `Scroller` as the chrome mockup's round 4, plus `phoneDocScroll()`, the one rule for "document or box"). The installed Home Screen app keeps its measured box; notes and Settings keep their fixed shell (the root scrolls only while `data-edge="glass"`). - The current list page is in the flow and one large screen tall at least, so its own tint runs under Safari's toolbar; the pages beneath are fixed behind it, shifted up by the scroll they were left at, so Back finds the list where it was (checked in the simulator: scrolled 700, opened a note, Back, 700). The back button floats, with a blur ramp that appears only once rows are under it. The virtual list reads the window's scroll less where its box starts. - The bottom step ("bottom continues" at 430x932 webkit): the frosted layers (floor, picture copy, sky blur) now come in at once instead of fading in, so nothing is half there when a screenshot or a finger looks; and with the page's own tint running under the toolbar the floor adds none (it showed lighter, a double tint). I could not make the step appear again in isolation, so the cause is a half-finished fade; the fix removes the fade on the way in. - The backdrop keeps the kayg.org technique already in `Backdrop.svelte`/`scroll-link.ts` (document-height clipped surface, a layer counter-scrolled on a root scroll timeline, touch WebKit 26.4+ only, fixed fallback elsewhere); it now has a document that scrolls to follow. - Everything from #497: no live blur on the frosted screens (the picture blurred once, the screens only tint), a solid fixed top strip in the edge colour (Safari tab only), no bottom strip. **Tests** (phone-bars, phone-edges, home-screen, safe-areas, pwa, glass, `--no-deps`, run one project at a time): chromium-390 440 passed; chromium-1440 6 passed; webkit-1440 4 passed; webkit-390 428 passed and 12 phone-bars tests that died with "Target page closed" (browser crashes under host load), rerun alone: 12 passed. Specs changed: a solid fixed layer at an edge must be the page colour; frosted screens have no bottom-strip equality check (their last row continues the one above). Evidence is on #445 (simulator sheet, Safari tab, seed photo, light above and dark below). Not merged on purpose. Needs the real iPhone: the toolbar over a scrolled list, Back restoring the scroll, the top strip colour. 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_019QGa6qjALuHyi8H1naGp6b

kayg added 8 commits

2026-10-17 04:25:44 +00:00

Phone list screens: the backdrop is blurred once, the screens only tint; the note's top bar blurs only once text is under it (#445 ) b7b735f2ee

Backdrop: blur the picture layers only; the floor stays the page colour (#445 ) 8ae102267f

Top: a solid fixed strip in the edge colour; bottom: no strip, the glass runs under Safari's toolbar (#445 , #476 ) 53a8947c18

Edge strip follows the dim; tests: a solid fixed strip must be the page colour, frosted screens have no bottom strip (#445 ) 205ac0d9f8

Backdrop: photos are blurred once in script (a small opaque copy), not by a CSS filter on the big layer (#445 ) 488eae24fd

Phone list pages scroll the document in a browser tab, through one shared scroll adapter; the frosted layers come in at once (#445 ) 711ddbb3ef

Doc scroll: only the frosted list pages are fixed behind; a note keeps its own screen (#445 ) fb062c6de7

Doc scroll: the page's tint runs under the toolbar itself, so the floor adds none (#445 )

CI / server (pull_request) Successful in 41s

Details