diff --git a/src/pages/index.astro b/src/pages/index.astro index 1fc87a5..9129dd2 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -215,6 +215,20 @@ const canonical = new URL('/', Astro.site); it falls back to body, and a transparent answer from this layer hands the toolbar its default grey instead of the page's own dark. */ background-color: var(--paper); + /* The apron. A deep rubber-band fling drags this layer's edges into view, and + what Safari composites beyond them is not reliably the page's to choose: the + gap fill has its own rules, and on a hard fling the fixed layer is repositioned + asynchronously and can lag the bounce by whole frames — which put a strip of + not-this-layer on screen at exactly the moment the eye is on the edge. Coverage + has to travel with the layer itself, so it is cast from it: a zero-blur shadow, + one viewport of solid --paper beyond every edge, clipped by nothing (shadows + paint outside the border box and ignore this element's own overflow). Invisible + at rest, it means any strip revealed next to this layer during any bounce, at + any lag, in either direction, is the same paint as the layer's own faded edge. + The lvh spread matters: the bounce can't exceed a viewport, so the apron always + outruns it. Plain vh first as the fallback for engines without lvh. */ + box-shadow: 0 0 0 100vh var(--paper); + box-shadow: 0 0 0 100lvh var(--paper); } /* The grey bar, properly.