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 `