Safari: Zoomable images make the body extend beyond the content

[imalfect]

Description

When using react-medium-image-zoom for my images, a long blank space after the website's content apperars (below the footer), I diagnosed it is happening because of this module, specifically

<span data-rmiz-ghost="" style="height: 390px; left: 572px; width: 656px; top: 2994px;"><button aria-label="Expand image: Dashboards - Release Dashboard_06_25_2024.png" data-rmiz-btn-zoom="" type="button"><svg aria-hidden="true" data-rmiz-btn-zoom-icon="true" fill="currentColor" focusable="false" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M 9 1 L 9 2 L 12.292969 2 L 2 12.292969 L 2 9 L 1 9 L 1 14 L 6 14 L 6 13 L 2.707031 13 L 13 2.707031 L 13 6 L 14 6 L 14 1 Z"></path></svg></button></span>

because of the styles of the expand.

height: 390px; left: 572px; width: 656px; top: 2994px;

This issue is exclusive to safari (I guess safari really is the internet explorer of web development nowadays lol), does not happen on other browsers.
You can view an example here: https://kasmedia.com/article/kaspa-market-dashboard-2024-06-26-kaspa-on-chain-metrics-showing-signs-of-bullish-reversal

You can check another page that does not contained images with this package, and notice the issue does not happen there: https://kasmedia.com/article/the-silver-standard-rusty-kaspa-s-evolution-to-digital-excellence

I'm pretty sure it's just safari's problem, but if there's any solution to this problem that you're aware of, I'd be extremely grateful if you could share it.

Cheers.

[rpearce]

Thanks for the bug report! I'll need to look into why it's doing that when I get some time.

[imalfect]

Thank you very much, I really appreciate it!

[rpearce]

You're right, and this is super weird (and bad). The "ghost" box that the button—for accessibility—gets put in should be the exact size of the image. I think I'll have time tomorrow to figure this out.

I'll try to reproduce this with that same image somewhere else and start from there. If I can reproduce it in isolation, I can fix it.

[rpearce]

Update: I know what the problem is, and I have what I believe is a pretty good fix, but I need to test it quite a bit. Once I do that, I'll release a beta version, get you to test it, and then we can make it live.

[rpearce]

@imalfect Can you please install [email protected] and see if that solves the problem for you? If so, could you test your images with image zooming a bit and make sure they still work as expected?

[imalfect]

Hey @rpearce, I just installed it and tested whether the issue is resolved. It seems like the empty space at the end of the website doesn't exist anymore. Thank you very much for spending your time on looking into this issue, I really appreciate your work! Closing the issue as it is resolved.

[rpearce]

@imalfect Thanks! I'll put together an official release later today for 5.2.8, and I'll follow-up here when that is released.

[rpearce]

@imalfect This fix has been officially published in [email protected], and you've been added to the "All Contributors" list in the README for your contributions here (thorough bug reporting!). Have a great rest of your day.

[imalfect]

Thank you! I really appreciate it! You too!