BetterTyped/react-zoom-pan-pinch

Image initial position calculation incorrect when browser cache is disabled on Chrome

rsbrowne opened this issue · 2 comments

rsbrowne commented

Describe the bug
When the browser's cache is disabled the calculation for the image starting position (when not full width) seems to be incorrect. It seems that the calculation might be happening before the image is done loading and as a result 0 is being used for the image width and height (This is just my theory on what's going wrong but I also suspect this may be related to issue #112).

To Reproduce
Steps to reproduce the behavior:

  1. Visit the responsive image docs
  2. Open dev tools -> Network -> tick "Disable cache"
  3. Reload the page
  4. The image should now be in the wrong position i.e. top left corner of the image should now be in the center of the screen
  5. If it looks fine try resizing the page slightly

Expected behavior
The image should be positioned correctly regardless of how long it takes the image asset to load

Screenshots
responsive-image-bug

Desktop (please complete the following information):

  • OS: Windows 10
  • Browser: Chrome
stevebrowndotco commented

I solved this with a workaround

    const handleImageOnLoad = (image: HTMLImageElement) => {
        transformRef.current?.resetTransform()
    }
lucas-nd commented

The approach of calling a resetTransform when the image is loaded is not working