From 252e83274865bc1b4bb45362ca501ef5384678be Mon Sep 17 00:00:00 2001 From: mixflavor Date: Sun, 31 May 2026 19:44:46 +0900 Subject: [PATCH 1/2] fix(auto): stop footer-flooding flat content pages Page-end overwrite dyed html+body+body::before with the last opaque section's color, flooding the visible background of flat light pages with a short high-contrast footer. Classify the end section as a designed end-zone vs an incidental footer; for the incidental case tint only (correct rubber-band color, body left alone). Add overscrollFill: 'auto'|'always'|'never' escape hatch. Backward compatible: tall/gradient/continuous endings still fully overwrite. Co-Authored-By: Claude Opus 4.8 (1M context) --- README.md | 23 +++++++++++++--- src/utils.d.ts | 15 +++++++++++ src/utils.js | 64 ++++++++++++++++++++++++++++++++++++++++---- src/utils.mjs | 63 +++++++++++++++++++++++++++++++++++++++---- test/integration.mjs | 61 +++++++++++++++++++++++++++++++++++++++++ 5 files changed, 213 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 08e0c96..8582e5b 100644 --- a/README.md +++ b/README.md @@ -81,6 +81,13 @@ const bleed = createBleedblendAuto({ onPageLoad: (update) => { document.addEventListener('astro:page-load', update); }, + + // How far the page-end overwrite reaches. Default 'auto'. + // 'auto' — full overwrite on a designed end-zone, -only on an + // incidental short footer (no "footer flood" on flat pages) + // 'always' — legacy: always overwrite html + body + body::before + // 'never' — chrome-edge tint only, never touch html/body bg + overscrollFill: 'auto', }); // later, if you ever need to: @@ -151,7 +158,9 @@ For the bottom edge specifically: - **Gradient territory**: extend the gradient interpolation into the chrome. - **Mid-page section** (e.g. a belt between gradient and footer): step back — let Safari's edge sampling render the natural translucent chrome. -- **Last section** (footer at page-end): engage and tint the section color. Also overwrites ``, ``, and `body::before` so iOS rubber-band overscroll tints the same color and you don't see the html-bg mint leak through. +- **Last section** (footer at page-end): engage and tint the section color. How far that tint reaches into the background depends on what *kind* of ending it is (controlled by `overscrollFill`, default `'auto'`): + - **Designed end-zone** — a gradient ending, or a closing section ≥ 50% of the viewport, or a flat page whose background already matches the footer: overwrite ``, ``, **and** `body::before` so rubber-band overscroll tints the same color and you don't see the html-bg fallback leak through. + - **Incidental footer** — a short, high-contrast footer sitting over a flat light page: tint **`` only**. The rubber-band-exposed strip gets the right color, but the *visible* body is left alone so it doesn't flood to the footer color. For the top edge: always `SAFE_NATURAL` unless the user owns it via `.bleedblend-top`. Top chrome should feel light. @@ -165,7 +174,7 @@ Things `bleedblend` figured out (the hard way) so you don't have to: - **Safari samples non-fixed sections at the viewport edge**, not just fixed elements. The official docs and prior research suggested fixed-only. - **`opacity: 0` is still sampled** — to truly "step back", you need `display: none`. - **`100lvh - 100svh` is a static value** (the max dynamic chrome height), not the current chrome height. Don't use it for tint sizing — pick a small constant (e.g. 12px) that satisfies Safari's ≥3px sampling threshold. -- **`body::before { position: fixed; inset: 0 }` stretches into iOS rubber-band overscroll exposed area** and covers your `` background. To paint overscroll a section color, you have to override all three: `` bg, `` bg, and `body::before` bg via injected `