search

AdamRisberg / react-image-magnifiers

A collection of responsive, image magnifying React components for mouse and touch.
MIT License
347 stars 60 forks source link

GlassMagnifier not appearing correctly (Gatsby) #36

Closed vonba closed 3 years ago

vonba commented 3 years ago

Hello!

Thanks for this project, it's exactly what I needed – but I'm having a couple of issues I am hoping we can resolve.

I'm trying to use the GlassMagnifier component within a straightforward React component, rendered through Gatsby.

<GlassMagnifier imageSrc={maxSizeSrc} imageAlt={alt} />

I am not seeing any errors, but at first glance nothing happens. On inspecting I noticed that the magnifying glass itself has visibility set to hidden. If I manually remove this CSS property the glass appears correctly and follows the mouse cursor. However there is no magnification, there is just a semi-transparent magnifying glass.

The magnified image appears also to be hidden, and stuck in the top left corner even though its translate value is changing with the mouse. If I manually unhide this image also, I can see the following:

Screen Shot 2020-12-22 at 15 54 16

Please let me know if you need more details.

vonba commented 3 years ago

The whole issue turns out to be a max-width set on image tags in a normalization spreadsheet. Unclear to me how it caused this chaos but hopefully this will help someone with the same problem.