search

willnguyen1312 / zoom-image

A little yet powerful framework agnostic headless library to zoom images on the web
https://willnguyen1312.github.io/zoom-image/
MIT License
301 stars 9 forks source link

iOS and Safari show border around placeholder image #314

Closed arobbins closed 1 month ago

arobbins commented 1 month ago

Describe the bug

Hey Nam! One of my users found another pesky bug for you.

On iOS and Safari, there is border (with alt text displaying) that shows above the images.

To see the bug, visit this page https://muscleandspine.ca/shop/products/cork-massage-dual-ball/. Then click one of the thumbnail images but don't trigger the image zoom.

Screenshot 2024-08-28 at 10 47 26 AM

On mobile, it's a bit more pronounced since the alt text shows up within the border as well.

I did some investigating and I believe it's because the <img> tag that the library adds to the DOM for the zoom is initially missing a src attribute. I don't think iOS and Safari like that :)

Reproduction

https://muscleandspine.ca/shop/products/cork-massage-dual-ball/

Used Package Manager

npm

Validations

willnguyen1312 commented 1 month ago

Hi Andrew, I'm going to try to re-prod it later today. Can you give me an example code and video if you have those already? That would be helpful. And I can't reproduce on the above website either 😅

willnguyen1312 commented 1 month ago

I think I can on your website - https://wpshop.io. Let's me fix that for ya 😉

arobbins commented 1 month ago

Awesome thanks Nam!

willnguyen1312 commented 1 month ago

Hi Andrew. Can you update your dependency to use the latest version. I think it should work. From now on, zoom image will only be available on demand instead of sitting in the DOM forever 😄

https://github.com/user-attachments/assets/86a61dae-8483-4dac-84fc-5b54edb02db4

arobbins commented 1 month ago

Fixed has been confirmed. Thanks for always having such a quick turn around Nam.

Cheers.