There may be problems in some magnification situations.

[uyoungco]

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]

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]

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]

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

How can I build a repro case?

[uyoungco]

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

[jtiee]

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]

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

[jtiee]

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.