There may be problems in some magnification situations.

francoischalifour / medium-zoom

🔎🖼 A JavaScript library for zooming images like Medium

https://medium-zoom.francoischalifour.com

MIT License

3.58k stars 161 forks source link

There may be problems in some magnification situations. #205

Open uyoungco opened 7 months ago

uyoungco commented 7 months ago

Bug description

If the image is not fully displayed, it will also be incomplete after enlargement.

How to reproduce

Please check the error reproduction link.

Expected behavior

The page image display may be missing, and it should be a complete image after enlargement.

Reproducible example

Link to the bug reproduction

Environment

Browser: Chrome / 119.0.6045.123 Mac OS
medium-zoom version: 1.0.8

jtiee commented 7 months ago

When I visit your repro link, I see a huge image. When I click it, it "zooms" to show the entire image. So, I'm unable to reproduce the problem.

I've tried using the following browsers:

Chrome 119.0.6045.159
Firefox 120.0
Safari 17.1 (19616.2.9.11.7)

You should share a screenshot of the problem.

uyoungco commented 6 months ago

I'm sorry, I have replaced the image enlargement plugin on the example webpage with something else.

This issue still exists, if the picture is not fully displayed, the image shown after using the magnifier will also be incomplete.

jtiee commented 6 months ago

What does "not fully displayed" mean? Outside the current viewport? Not yet fully loaded?

How can I build a repro case?

uyoungco commented 6 months ago

https://codesandbox.io/p/sandbox/medium-zoom-issues-205-8vx9yc

jtiee commented 6 months ago

Thanks for the repro case!

I see the problem. The Tailwind classes are applied to the <img> tags, and not to containers around the images. Since medium-zoom uses the <img> tag for the zoomed presentation, the Tailwind styles come along for the ride.

If you apply the styles to a container, you should get the full image upon zoom.

uyoungco commented 6 months ago

In most cases, the <img> tag will definitely be styled. So, do you have a good solution for this?

jtiee commented 5 months ago

If you style your images so they are cropped at regular size, I'm not sure why you'd expect medium-zoom to know how to remove the crop from images. Some folks might crop their images, as you do, and expect the crop to remain upon zoom.

You might consider:

Use your own event handling to call open or on. That would let you listen to the Promise<Zoom> (or open event) and appropriately manipulate the image styles in the Zoom container.
Use your own event handling to call attach. That would let you zoom to a normally hidden image with different styling than the normal-size image.

If you can't get those options to work, the only other thing I can suggest is to find/implement another zoom library.

FYI: I'm not a contributor to medium-zoom, I was trying to help as a very satisfied user of this library.