Swiper Zoom issue and zoom panning problems with <picture> elements

[risticmladen]

Hi,

Currently, I've implemented Swiper.js on my web site for some time and the slider works just fine.

But today I've tried to implement zoom to the slider. And I think that I found the bug.
I've noticed that when the zoom is triggered on the image, maxRatio and/or data-swiper-zoom attribute are ignored.
The images will be zoomed to the default level (3 times scale is the default). And not on the value which is specified.
Also, the second thing, when the image is zoomed, up and down panning doesn't work properly.

My HTML markup is:

  <div class="swiper-slide">
      <div class="swiper-zoom-container" data-swiper-zoom="2">
          <picture>
              <source srcset="./img/1024px.jpg" media="(max-width: 1024px)">
              <img src="./img/1920px.jpg" alt="" />
          </picture>
      </div>
  </div>

In order to have functional zoom I need to have container

which will hold image.
By default, it expects to zoom one of the img, picture or canvas element. Right?
But what if we have two or more image sources inside ?

I've also tried this:

 <div class="swiper-slide">
          <picture class="swiper-zoom-container">
                  <source srcset="./img/1024px.jpg" media="(max-width: 1024px)">
                  <img src="./img/1920px.jpg" alt="" />
          </picture>
  </div>

and this:

  <div class="swiper-slide">
      <div class="swiper-zoom-container" data-swiper-zoom="2">
          <picture>
              <source srcset="./img/1024px.jpg" media="(max-width: 1024px)">
              <img class="swiper-zoom-target" src="./img/1920px.jpg" alt="" />
          </picture>
      </div>
  </div>

When I use just one image inside swiper-zoom-container, then zoom and panning work fine.But that isn't a good option for me. I need to use different sources by breakpoint.

Do you have some suggestion? Any other idea?Thank you.

PS I'm using the latest swiper.js version (6.5.0)