francoischalifour / medium-zoom

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

MZ doesn't play nice with overflow: hidden #19

Closed antoinechalifour closed 6 years ago

antoinechalifour commented 6 years ago

Hi again!

I am building an app in with images in cards, these cards have an "overflow: hidden" property and MZ doesn't work that well in this case.

Here is a simplified example to reproduce this bug: https://codepen.io/antoinechalifour/pen/yzVpMa

My 2 cents: MZ should clone the image element, append it to the end of the body and manipulate that element instead of the original one.

Also, this example breaks the scroll feature: https://codepen.io/antoinechalifour/pen/EwNoXb

francoischalifour commented 6 years ago

Thanks for bringing up this edge case.

That's indeed a good solution. Besides, it would make #6 way easier to implement. I've already got a POC. I will send a PR so you can preview the changes and see if you're happy with it! 🔥

Regarding the second example, I'd suggest using min-height: 100vh;.

francoischalifour commented 6 years ago

Fixed with #20.