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

Cannot close overlay before `opened` event has fired. #196

Open foxacid opened 1 year ago

foxacid commented 1 year ago

On slow connections, when starting a zoom, the overlay cannot be closed until the images has loaded (opened event has fired). This may result in a user experience where the page seems broken as the overlay blocks all interaction and cannot be closed manually. Additionally the close method only seems to work once the zoom animation has finished (opened event has fired).

I'd expect to be able to close the overlay via click right after initiating the zoom animation (open event).

foxacid commented 1 year ago

I just realised that the problem is related to my usage of lazySizes and automatic srcset size detection...

francoischalifour commented 1 year ago

Medium Zoom needs to load the target image before zooming, it's probably why it doesn't play well with lazysizes.

Can you please provide a reproduction?

foxacid commented 1 year ago

Thank you for the quick reply.

Here's a reproduction: https://codesandbox.io/s/medium-zoom-x-lazysizes-5mjkdd?file=/index.html