Repository navigation
Fix zoomed-in mobile swipes panning the page instead of the timeline - #906
Merged
Merged
Conversation
Swipable only calls preventDefault on a touchmove when that move is more horizontal than vertical. Browsers decide whether a gesture is a native pan on the first touchmove, so a swipe that starts slightly diagonal (or with a pixel of jitter) gets claimed by the browser. When the page is zoomed in, that pans the whole page instead of advancing the timeline. Declare touch-action: pan-y pinch-zoom on the two Swipable drag targets (the story slider mask and the timenav background) so horizontal drags always go to Swipable, while vertical scrolling and pinch-zoom stay native. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
TheCause
added a commit
to TheCause/TimelineJS3
that referenced
this pull request
Sep 25, 2026
- Bump dompurify to ^3.4.16 resolving all production npm audit advisories - Bump adm-zip to ^0.6.1 - Harden media types against XSS by removing direct innerHTML injections (Bluesky, DailyMotion, GoogleDoc, Vine) - Remove obsolete IE/Edge browser check in PDF.js - Add touch-action: pan-y pinch-zoom in StorySlider and TimeNav for mobile swipe gestures (PR NUKnightLab#906)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
On a phone, with the page zoomed in, some swipes on the timeline pan the whole page instead of moving to the next slide or scrolling the timenav.
Swipable._onDragMoveonly callspreventDefault()when atouchmoveis more horizontal than vertical. The browser decides whether a gesture is a native pan on the firsttouchmove. So a swipe that starts slightly diagonal, or with a pixel of jitter, gets claimed by the browser, and the page pans instead.Fix
Add
touch-action: pan-y pinch-zoomto the two elements Swipable listens on:.tl-slider-container-mask(story slider).tl-timenav-slider-background(timenav)The browser now knows up front that horizontal drags on these elements belong to the page's JavaScript, while vertical scrolling and pinch-zoom stay native. This is CSS only; no JS changes.
Trade-off: while zoomed in, a horizontal drag that starts on the timeline no longer pans the page. You pan by dragging outside the timeline or by pinching. That's normal for a carousel-style widget.
Testing
npm testpasses (123 tests), andnpm run buildcompiles the rule intotimeline.cssand the theme CSS files.touch-actionis correct on both elements, and a synthetic touch swipe still advances slides.Independent of #901 (JS modernization); either can merge first.
🤖 Generated with Claude Code