Skip to content

Commit f7febe1

Browse files
authored
fix(zoom): fix transform origin of zoom.in() function (#7904)
`zoom.in()` function sets an unexpected `transform3d()` value to the `.swiper-zoom-container` element.
1 parent b259723 commit f7febe1

File tree

1 file changed

+21
-2
lines changed

1 file changed

+21
-2
lines changed

src/modules/zoom/zoom.mjs

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -494,6 +494,8 @@ export default function Zoom({ swiper, extendParams, on, emit }) {
494494
mousePanStart.y = e.clientY;
495495
image.startX = newX;
496496
image.startY = newY;
497+
image.currentX = newX;
498+
image.currentY = newY;
497499
}
498500

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

565+
const prevScale = currentScale;
566+
563567
const forceZoomRatio = typeof e === 'number' ? e : null;
564568
if (currentScale === 1 && forceZoomRatio) {
565569
touchX = undefined;
@@ -590,8 +594,18 @@ export default function Zoom({ swiper, extendParams, on, emit }) {
590594
translateMaxX = -translateMinX;
591595
translateMaxY = -translateMinY;
592596

593-
translateX = diffX * zoom.scale;
594-
translateY = diffY * zoom.scale;
597+
if (
598+
prevScale > 0 &&
599+
forceZoomRatio &&
600+
typeof image.currentX === 'number' &&
601+
typeof image.currentY === 'number'
602+
) {
603+
translateX = (image.currentX * zoom.scale) / prevScale;
604+
translateY = (image.currentY * zoom.scale) / prevScale;
605+
} else {
606+
translateX = diffX * zoom.scale;
607+
translateY = diffY * zoom.scale;
608+
}
595609

596610
if (translateX < translateMinX) {
597611
translateX = translateMinX;
@@ -614,6 +628,9 @@ export default function Zoom({ swiper, extendParams, on, emit }) {
614628
gesture.originX = 0;
615629
gesture.originY = 0;
616630
}
631+
632+
image.currentX = translateX;
633+
image.currentY = translateY;
617634
gesture.imageWrapEl.style.transitionDuration = '300ms';
618635
gesture.imageWrapEl.style.transform = `translate3d(${translateX}px, ${translateY}px,0)`;
619636
gesture.imageEl.style.transitionDuration = '300ms';
@@ -647,6 +664,8 @@ export default function Zoom({ swiper, extendParams, on, emit }) {
647664
}
648665
zoom.scale = 1;
649666
currentScale = 1;
667+
image.currentX = undefined;
668+
image.currentY = undefined;
650669
image.touchesStart.x = undefined;
651670
image.touchesStart.y = undefined;
652671
gesture.imageWrapEl.style.transitionDuration = '300ms';

0 commit comments

Comments
 (0)