swiper icon indicating copy to clipboard operation
swiper copied to clipboard

fix(zoom): initialize gesture state after programmatic zoom

Open EricWvi opened this issue 3 months ago • 0 comments

Fixes an issue where pinch-to-zoom gestures are limited to the default maxRatio (3x) after using programmatic zoom (e.g., double-tap or calling swiper.zoom.in()) without first performing a manual pinch gesture.

Problem: I want to use this setting:

const DOUBLE_TAP_ZOOM = 2; // Zoom level for double tap
const MAX_PINCH_ZOOM = 5; // Maximum zoom level for pinch

zoom={{
        maxRatio: MAX_PINCH_ZOOM,
        minRatio: 1,
        toggle: false, // Disable default double-tap zoom toggle
}}

When users double-tap to zoom before ever pinching, the gesture system's maxRatio is not properly initialized. This causes subsequent pinch gestures to be incorrectly capped at 3x instead of respecting the configured maxRatio or natural image limits.

Root Cause: The zoomIn() function sets up gesture.slideEl, gesture.imageEl, and gesture.imageWrapEl, but does not initialize gesture.maxRatio. This causes the check if (!gesture.slideEl) in onGestureStart() to be skipped on subsequent pinch gestures, preventing proper maxRatio initialization.

Solution: Call getMaxRatio() in zoomIn() after DOM elements are set up to ensure gesture.maxRatio is properly initialized for programmatic zoom operations.

Reproduction:

  1. Load swiper with zoom enabled and maxRatio > 3
  2. Double-tap an image to zoom in (without pinching first)
  3. Try to pinch-zoom further
  4. Expected: Can zoom up to configured maxRatio
  5. Actual: Limited to 3x zoom

Fix Verification: After this fix:

  1. Pinch first → works correctly ✓
  2. Double-tap first → pinch now works correctly ✓

EricWvi avatar Oct 16 '25 07:10 EricWvi