search

francoischalifour / medium-zoom

🔎🖼 A JavaScript library for zooming images like Medium
https://medium-zoom.francoischalifour.com
MIT License
3.58k stars 160 forks source link

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

Open rebron1900 opened 5 months ago

rebron1900 commented 5 months ago

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

rebron1900 commented 5 months ago

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.

image