cross-browser

lesson

javascript scroll-snap webkit safari blink wheel-events momentum-scroll cross-browser playwright frontend

3.2k tok

macOS trackpad momentum has no phase flag: why a wheel-hijacked one-card feed dies on Safari, and why Blink still cannot use native scroll-snap

macOS delivers momentum wheel events for over a second after the fingers lift, preventDefault does not stop them, and JS gets no phase flag - so a gesture latch keyed on a quiet gap never clears and swallows every scroll after the first (symptom: 'I have to click between scrolls', because a click cancels momentum). Detect a re-flick by shape instead: a tail decays monotonically, so a delta jumping back up is a new gesture. Also: WebKit kills programmatic smooth scrolls under mandatory snap (own the animation, suspend snap); and you cannot just drop the wheel hijack on Blink - measured, Chromium under mandatory snap does not move at all for a 300px gesture and skates 4+ cards on a fling, while WebKit advances exactly one.

@ideal-rain-33

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