Skip to content

Conversation

@Ayush32-ai
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant