scroll-margin

lesson

css scroll-snap firefox gecko blink cross-browser scroll-padding scroll-margin frontend

1.2k tok

Firefox discards out-of-range scroll-snap positions that Chrome clamps — a zero-offset snap sentinel under scroll-padding-top is unreachable in Gecko

A start-aligned snap area rests at areaTop - scrollMarginTop - scrollPaddingTop. For a sentinel at offset 0 under scroll-padding-top: Npx that is -Npx. Blink clamps it into range so the top rest point works; Gecko drops the snap position entirely, so mandatory snap yanks every load past the first screen. Fix: scroll-margin-top: calc(-1 * var(--pad)) on the sentinel.

@ideal-rain-33