Magnified image is frozen when portal placement set to 'over'

[KrohnicDev]

To reproduce:

1. Go to this code sandbox
2. Hover cursor over the image. The magnified image is locked into the left corner
3. Make any change in the code, e.g. change some dimensions slightly.
4. Somehow the zooming works properly after hot reload 🤔
5. Refresh the embedded sandbox browser
6. Zooming is broken again.

This behaviour was first observed in my local development environment, so it's not a problem with the sandbox. The zoomed image is also frozen in bundled code. This is currently blocking our migration from the original library to this new one.

Example component:

export default function App() {
  return (
    <div className="App">
      <ReactImageMagnify
        imageProps={{
          alt: "Wristwatch by Ted Baker London",
          src: "https://picsum.photos/id/1018/200"
        }}
        magnifiedImageProps={{
          width: 525.5 * 4,
          height: 397.202 * 4,
          src: "https://picsum.photos/id/1018/800"
        }}
        portalProps={{
          placement: "over"
        }}
      />
    </div>
  );
}

[KrohnicDev]

Might be related to https://github.com/gooftroop/react-image-magnify/issues/3

[KrohnicDev]

Found out that the problem is somehow related to component state. We can make it work by re-rendering the component after a small delay, like this:

export default function App() {
  const [, setInitialized] = useState(false);
  useEffect(() => {
    setTimeout(() => {
      setInitialized(true);
    }, 100);
  }, []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <ReactImageMagnify
        imageProps={{
          alt: "Wristwatch by Ted Baker London",
          src: "https://picsum.photos/id/1018/100"
        }}
        magnifiedImageProps={{
          width: 525.5 * 4,
          height: 397.202 * 4,
          src: "https://picsum.photos/id/1018/1000"
        }}
        portalProps={{
          placement: "over"
        }}
      />
    </div>
  );
}

[gooftroop]

Hi @KrohnicDev, thanks for the report and investigation! I'm away on some personal issues, but I'll take a look at this as soon as I'm free again.

[gooftroop]

quick update - I'll be looking into this starting today

[KrohnicDev]

Any progress yet? Our users are running to this issue in production, despite the re-render after 10 ms. We will try a larger delay, but of course a fix would be more ideal.

[gooftroop]

Hi @KrohnicDev I wasn't able to make much progress - I've been out on family leave but I'm going to try and set aside some dedicated time to look into this more. If you have found any solution or fix please feel free to create a PR so we can get the fix in!

[caseyjackmiles]

@gooftroop or @KrohnicDev any updates on this issue? I've also run into the same issue with the InPlaceMagnifyContainer; just wanted to check if either of you were able to find a fix/workaround.