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

[rsbrowne]

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

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome

[stevebrowndotco]

I solved this with a workaround

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

[lucas-nd]

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