Zoom not working correctly on mobile with Gallery + Zoom component

[Bella-Jheng]

Issue Description

I’m experiencing a zoom issue with the image component on my homepage. The component in question is the third section of the page.

Steps to Reproduce

• Open the lightbox for an image.
• Attempt to zoom in.

Observed Behavior

• The image pans upward and moves out of the modal.
• The further down the component is on the page (e.g., 4th, 5th), the higher the image shifts.
• The issue does not occur when the image component is the first one on the page.

Expected Behavior

• The image should stay centered within the modal when zoomed in, regardless of the component’s position on the page.

Possible Cause (Hypothesis)

• The zoom logic may be using the image’s position relative to the entire page (document offset) instead of the modal container.
• This could cause an incorrect translation calculation when the component is placed lower on the page.
• Adjusting the zoom or pan calculation to use the modal/container’s bounding box instead of the global scroll position might resolve the issue.

ScreenRecording_09-03-2025.09-48-38_1.mov

[Bella-Jheng]

Environment

• Device: [ iPhone 16 Pro / Android Pixel 8]
• Browser: [Safari / Chrome mobile]
• Library versions: [swiper 10.3.1]

[Bella-Jheng]

i also try to move my modal to the component zoom is still wrong.