fix: timeline chart scrolling on firefox (#1976)

## Summary



- Fix slow and jumpy vertical scrolling in Firefox on the timeline chart's onWheel handler
- Firefox reports small non-zero `deltaX` values during vertical trackpad scrolling (trackpad gestures are rarely perfectly vertical), while Chrome silently zeroes these out. The previous `if (deltaX !== 0)` check was calling `preventDefault()` on nearly every vertical scroll in Firefox, blocking native scroll behavior.
- Replace the `deltaX !== 0` check with `Math.abs(deltaX) > Math.abs(deltaY)` so horizontal panning only activates when the gesture is predominantly horizontal, and skip unnecessary `setOffset` calls and re-renders on vertical scrolls

### How to test locally or on Vercel



1. In Firefox, verify vertical scrolling on the timeline chart is smooth and not blocked

2. In Chrome, verify vertical scrolling still works as before

3. Verify horizontal trackpad panning still works in both browsers

4. Verify Ctrl/Cmd + scroll zoom still works in both browsers
This commit is contained in:
Karl Power 2026-03-26 09:32:38 +01:00 committed by GitHub
parent e21811cc47
commit e16d3cd9f4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -131,15 +131,16 @@ export const TimelineChart = memo(function ({
if (metaKey || ctrlKey) {
e.preventDefault();
setScale(v => Math.max(v + -deltaY * 0.01, 1));
return;
}
if (deltaX !== 0) {
const isHorizontalScroll = Math.abs(deltaX) > Math.abs(deltaY);
if (isHorizontalScroll) {
e.preventDefault();
setOffset(v =>
Math.min(Math.max(v + deltaX * (0.1 / scale), 0), 100 - 100 / scale),
);
}
setOffset(v =>
Math.min(Math.max(v + deltaX * (0.1 / scale), 0), 100 - 100 / scale),
);
});
useEffect(() => {