laurenashpole / react-inner-image-zoom

A React component for zooming images.
https://laurenashpole.github.io/react-inner-image-zoom
MIT License
325 stars 36 forks source link

zoomType is "hover" and zoomPreload is "false" style top or left miscalculation #120

Open WhaleFallXH opened 2 years ago

WhaleFallXH commented 2 years ago

<InnerImageZoom src="unsplash.jpg" zoomSrc="unsplash-large.jpg" width={600} height={750} // zoomPreload={true} zoomType="hover" fullscreenOnMobile hideHint hasSpacer />

Warning:NaNis an invalid value for thetopcss style property. in img (at ZoomImage.js:7) in ZoomImage (at InnerImageZoom.js:327) in figure (at InnerImageZoom.js:299)

WhaleFallXH commented 2 years ago

@laurenashpole

laurenashpole commented 2 years ago

@WhaleFallXH I'm unable to reproduce this. Even throttling to simulate a slow network I'm seeing a long pause before the image appears but no warnings. I might need more details on how you're using the component, what version, and what browser you're seeing that warning on to investigate more.

I do recommend using zoomPreload whenever you use to zoomType hover to avoid flickering or any other oddities.