If the image uses the srcset attribute, the pop-up layer will be displayed misaligned.

[rebron1900]

Bug description

If the image uses the srcset attribute, the pop-up layer will be displayed misaligned.

How to reproduce

use code

  const images = document.querySelectorAll('.u-rich-text img');
  mediumZoom(images, {
    background: 'rgba(0,0,0,0.75)',
  });

Expected behavior

Reproducible example

please see my blog

https://1900.live/top-5-personal-movies-of-the-year-2023/

Environment

• Browser: name / version
• medium-zoom version:

[rebron1900]

During the troubleshooting process, I found that when initializing the container variable, the document.documentElement.clientHeight property is set to the height of the entire document, causing the image to appear in the middle of the document. I temporarily solved this problem by adding options and setting the container to .medium-zoom-overlay.

import mediumZoom from 'medium-zoom';

// Medium Zoom.u-rich-text img,figure img
export default function initMediumZoom() {
  const images = document.querySelectorAll('.u-rich-text img');
  mediumZoom(images, {
    background: 'rgba(0,0,0,0.75)',
    container: '.medium-zoom-overlay'
  });
}

I also noticed that when using the srcset attribute, medium-zoom seems to clone the image node. What is the reason behind this? Additionally, there is a flickering issue on the webpage when zooming in on the image.