Fix: Thumbnail view left/right buttons working when zoomed in a lot #1425
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.
Summary
This PR introduces improvements to zoom controls, navigation click handling, and image caching to make the BookReader smoother, more responsive, and more reliable across browsers and devices.
Problems Addressed
Navigation clicks blocked when zoomed in – The drag-to-scroll behavior was intercepting clicks on navigation arrows and other controls, preventing them from working when zoomed.
Inefficient image usage – High-resolution images were sometimes re-fetched even when a suitable cached image was already loaded.
Zoom UX inconsistencies – Pinch/trackpad zoom behavior was inconsistent or glitchy across Safari, iOS, and Samsung Internet.
Image transition flicker – When switching from a lower-quality image to a higher-quality one, flicker could occur.
Key Changes
DragScrollable
Skip drag handling in _dragStartHandler for navigation and UI control elements (.BRfooter, .BRnav, .BRicon, button).
Only call preventDefault in _dragEndHandler if drag distance exceeds dragMinDistance.
ImageCache
Implemented getFinalReduce() to pick already-loaded images of equal or better quality before fetching new ones.
Added getBestLoadedReduce() for efficiently selecting the closest available cached resolution.
Updated _serveImageElement() to set loaded state on first load and respect srcset when enabled.
ModeSmoothZoom
Integrated interact.js for consistent pinch gesture handling.
Added device/browser-specific handling:
iOS: Touch count monitoring to avoid false pinch events.
Safari: Workarounds for missing/misfired gesture events.
Samsung Internet: Drag support when touch actions are disabled.
Smoothed zoom rendering with requestAnimationFrame buffering.
Zoom centers on cursor/touch point and supports ctrl+wheel zoom with tuned scaling speeds for Mac vs. Windows.
PageContainer
Uses ImageCache.getFinalReduce() and getBestLoadedReduce() to minimize unnecessary image loads.
Displays a lower-resolution cached image while higher-resolution loads, reducing perceived load time and flicker.
Removes old images after a short delay post-load for smoother transitions.
Preserves positioning and layout while swapping images.
Result
Navigation controls work reliably at all zoom levels.
Zooming is smoother, more predictable, and browser/device-compatible.
Cached images are reused whenever possible, reducing network requests.
Page transitions between resolutions are visually smoother with minimal flicker.
Testing
Verified navigation works while zoomed in (mouse + touch) on desktop and mobile.
Tested pinch zoom, ctrl+wheel zoom, and drag-scrolling on Safari (iOS), Samsung Internet, Chrome, and Firefox.
Confirmed fewer duplicate image requests and correct fallback to cached images.
Observed smoother image resolution transitions without flicker.