Zooming effect breaks when images is clicked while scrolling

[Binibeno]

Issue Type

• Bug report
• Feature request
• Question / support request
• Other

Description

As per the title says, the zooming effect becomes broken if the pages is being scrolled when the images is clicked. It sometimes takes a few tries to get but when the images does get stuck, the page becomes unusable, because this component blocks the scrolling and interaction with any other part of the page. The close icon does appear on the top right side of the page but it is not clickable.

There is no special config needed to reproduce this issue, it works on every storybook demo, where there is space to scroll.

For example this one: https://rpearce.github.io/react-medium-image-zoom/?path=/story/galleries--image-gallery

I've tried hacking around this issue by disabling scroll (setting the html body's overflow to hidden) when the image is clicked, but it did not work.

(I'm using Chrome 115 and Windows if that matters)

If anyone has any hacks or possible fixes for this please let me know! Maybe anyone has any alternative packages I can switch to, that function similarly to this one?
Any help would be appreciated!

[rpearce]

@Binibeno I can't reproduce this on macOS after trying for a few minutes (Chrome, Firefox, Safari), so it might be confined to Windows. If that's the case, I'll need to reproduce it there and use that for testing any fixes that need to be made.

Code contributions to the project are also welcome! If you are interested in that, see the contributing guide for more information.

If you're able to make a screen recording of the issue, that would be very helpful! If not, that's ok, too.

[Binibeno]

I created a screen recording, I've attached it with this reply. Hope this helps!

It only seems to happen when I'm using a mouse, not on touchpad or touchscreen.

second.try.mp4

[rpearce]

@Binibeno This is great! Thank you for taking the time to make the video.

[rpearce]

Yep, I just ran into this issue with my Logitech mouse. Will fix up

[tommoor]

It feels like a lot of the bugs on this lib are unfortunately caused by the use of listening for transitionend, does this likely fall into that same bucket?

[rpearce]

@tommoor I haven't tallied all the sources of bugs, but that doesn't feel right to me to say. transitionend may be the culprit here, but it's very effective for timing things with transitions. The only alternative I think I could use from a timing perspective is setTimeout, and that's brittle for a few reasons.

I won't know until I dig in, and this is my next priority.

[rpearce]

I can't use a mouse until tomorrow or the next day, but looking at the logic, the first thing I'm going to look at is the use of the wheel listener before the image has zoomed. This currently makes it so you can click and then mouse-wheel to close it before it opens, but if the wheel is already going while you click on it, something may be getting stuck. We'll see...

react-medium-image-zoom/source/Controlled.tsx

Line 622 in 8040ab2

window.addEventListener('wheel', this.handleWheel, { passive: true })

[rpearce]

@Binibeno This should be resolved in react-medium-image-zoom@5.2.5. Thanks for the report, and thank you for your patience with the fix. You have been added to the README's all contributors list for your bug report. Many thanks! 💜