Skip to content

Commit

Permalink
fix(zoom): fix transform origin of zoom.in() function (#7904)
Browse files Browse the repository at this point in the history
`zoom.in()` function sets an unexpected `transform3d()` value to the
`.swiper-zoom-container` element.
  • Loading branch information
m-kawafuji authored Mar 3, 2025
1 parent b259723 commit f7febe1
Showing 1 changed file with 21 additions and 2 deletions.
23 changes: 21 additions & 2 deletions src/modules/zoom/zoom.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -494,6 +494,8 @@ export default function Zoom({ swiper, extendParams, on, emit }) {
mousePanStart.y = e.clientY;
image.startX = newX;
image.startY = newY;
image.currentX = newX;
image.currentY = newY;
}

function zoomIn(e) {
Expand Down Expand Up @@ -560,6 +562,8 @@ export default function Zoom({ swiper, extendParams, on, emit }) {
touchY = image.touchesStart.y;
}

const prevScale = currentScale;

const forceZoomRatio = typeof e === 'number' ? e : null;
if (currentScale === 1 && forceZoomRatio) {
touchX = undefined;
Expand Down Expand Up @@ -590,8 +594,18 @@ export default function Zoom({ swiper, extendParams, on, emit }) {
translateMaxX = -translateMinX;
translateMaxY = -translateMinY;

translateX = diffX * zoom.scale;
translateY = diffY * zoom.scale;
if (
prevScale > 0 &&
forceZoomRatio &&
typeof image.currentX === 'number' &&
typeof image.currentY === 'number'
) {
translateX = (image.currentX * zoom.scale) / prevScale;
translateY = (image.currentY * zoom.scale) / prevScale;
} else {
translateX = diffX * zoom.scale;
translateY = diffY * zoom.scale;
}

if (translateX < translateMinX) {
translateX = translateMinX;
Expand All @@ -614,6 +628,9 @@ export default function Zoom({ swiper, extendParams, on, emit }) {
gesture.originX = 0;
gesture.originY = 0;
}

image.currentX = translateX;
image.currentY = translateY;
gesture.imageWrapEl.style.transitionDuration = '300ms';
gesture.imageWrapEl.style.transform = `translate3d(${translateX}px, ${translateY}px,0)`;
gesture.imageEl.style.transitionDuration = '300ms';
Expand Down Expand Up @@ -647,6 +664,8 @@ export default function Zoom({ swiper, extendParams, on, emit }) {
}
zoom.scale = 1;
currentScale = 1;
image.currentX = undefined;
image.currentY = undefined;
image.touchesStart.x = undefined;
image.touchesStart.y = undefined;
gesture.imageWrapEl.style.transitionDuration = '300ms';
Expand Down

0 comments on commit f7febe1

Please sign in to comment.