Zoom in and out seems unreliable when browser allow pinch zoom in/out for the site

[sjns19]

Check that this is really a bug

• I confirm

Reproduction link

swiper-zoom-bug.mp4

Bug description

I figured when we enable the "Force enable zoom" setting on Android chrome, the two finger pinch zoom in and out in the slider goes berserk.

I will be providing video because it happens only when a browser setting is enabled. The Demos provided on Swiper's official site themselves act like this.

I tested this on an iPhone (iOS 15) as well, kinda acts the same way.

The component setup I have is like this

import css from "./ImageSlider.module.scss";

import "swiper/css";
import "swiper/css/zoom";
import "swiper/css/navigation";

import { Zoom, Navigation, Pagination } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";

import { useState, useRef } from "react";

import { MdFullscreen, MdFullscreenExit } from "react-icons/md";

import Image from "next/image";
import DynamicComponent from "../../Miscs/DynamicComponent";

export default function ImageSlider({ images }): JSX.Element {
  const container = useRef(null);
  const [fullScreen, setFullScreen] = useState(false);

  const toggleFullScreen = () => {
    setFullScreen(!fullScreen);
  }

  let containerClass = fullScreen ? `${css["slider"]} ${css["slider-fullscreen"]}` : css["slider"];

  return (
    <>
      <DynamicComponent>
        <Swiper
          ref={container}
          resistanceRatio={0}
          modules={[Zoom, Navigation, Pagination]}
          zoom={true}
          navigation={true}
          pagination={{
            type: "custom",
            renderCustom: (swiper, current, total) => `${current}/${total}`
          }}
          className={containerClass}
        >
          <FullScreenToggler
            toggle={toggleFullScreen}
            isToggled={fullScreen}
          />
          {images.map((img, index) => (
            <SwiperSlide key={index}>
              <figure
                className={css["slider-item"]}
                style={{ backgroundColor: img.base_color }}
              >
                <div className="swiper-zoom-container">
                  <Image
                    src={img.src}
                    alt={`Image ${index + 1}`}
                    layout="fill"
                    objectFit={fullScreen ? "contain" : "cover"}
                  />
                </div>
              </figure>
            </SwiperSlide>
          ))}
        </Swiper>
      </DynamicComponent>
    </>
  )
}

const FullScreenToggler = ({ toggle, isToggled }) => {
  const title = !isToggled ? "Toggle full screen" : "Exit full screen";
  const Icon = !isToggled ? MdFullscreen : MdFullscreenExit;
  return (
    <button
      className={css["slider-fullscreen-toggler"]}
      onClick={toggle}
      title={title}
    >
      <Icon size={24} />
    </button>
  )
}

I'm not quite sure if this issue could be fixed but users having this setting enabled on their browsers are definitely not going to have a pleasant experience on the site.

Additionally, I've noticed that the left/right slide also gets triggered sometimes while zooming in and out, leaving the slide half frozen.

Expected Behavior

Neat and glitch-free zoom in and out experience.

Actual Behavior

Zoom in and out glitches when the browser forcefully allows users to zoom in and out on any site.

Swiper version

9.1.0

Platform/Target and Browser Versions

Android Chrome 109.0.5414.117 (should be on any browser actually)

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

[jelaydark1347]

I observe the same behaviour even without "Force enable zoom" setting turned on for browsers Chrome/Safari on Android/IOS

[sjns19]

I figured the element placements and their nesting sort of plays some roles too. However, I have figured this happens on iOS devices most often. I tested pinch zoom in/out feature of other sites like Google's photos section, they work flawlessly even on iOS so I assume it's possible to improve this further. Hoping someone takes a look at this issue.

[jelaydark1347]

I've caught the problem using direct call of zoom.in on double tap.

if (zoom.scale > 1) {
   zoom.out();
} else {
   zoom.in(e);
}

And see the same. As I can see, when scaling, the <div className="swiper-zoom-container" /> element doesn't calculate correctly it's min and max bounds relatively to original position.
It can be moved further then it should be.

in fullscreen when it is zoomed in we can see black space around the image (top and right around the white image on the screenshot).
The wrapper (swiper-zoom-container) is highlighted:

[jelaydark1347]

@sjns19
Hey, this issue seems to be fixed in the latest version 9.2.0.

[sjns19]

@sjns19 Hey, this issue seems to be fixed in the latest version 9.2.0.

Hi, thanks for notifying. Unfortunately, I can't check it out due to health issues right now, will check as soon as I can.

Ps, I'd like to request the author or contributors to have this thread opened for further discussion regarding the zoom feature if it's not a problem.

[nolimits4web]

Closing as what possibly could be done have been done in 9.2.0 with a lot of improvements in zoom pan/zoom logic

[codemilli]

@sjns19 @nolimits4web I think this bug still exists, doesn't it?