Animation jerky when magnifier images on Chrome (on Firefox is fluid)

Question

I am making a small web-app using javascript and GSAP.

The operation is very simple, I click on the preview and it zooms the right image into a specific coordinate. With the zoomed image is run activate the drag of the image.

The problem is that when I start it on chrome the first few clicks have a super lag and if the page is refreshed it returns the same problem every time.

The image is very heavy but more than that I can't compress it and I don't want to lose resolution.

This will run locally on the machine with touch screen so I don't care about the weight of the images, hovering etc... I was thinking of using electron but being chromium based it gives the same problems.

I tried various methods and libraries: anime.js, velocity.js, canvas but the result doesn't change. The only really performing one is to do it from CSS but then you lose control over the areas to zoom.

Strangely if you open the link on Firefox the rendering of the image is super smooth. It's actually like firfox downsampling during the animation and then loading the rest of the image, but making the experience less jerky.

My question is:

• is it possible to change chrome in the rendering method of images (inside config) and make it more like firefox?
• What can I do to make the animation smoother on Chrome as well?
• is there a way to force images into cache?

Here the LINK - https://animdrops.xyz/static/02-magnifier/

Here a simple example of the same problem (try the difference between chrome and firefox)

https://codepen.io/matt8629/pen/OJdJbXr FIRST LOAD PAGES IS A BIT LONG!

And here zoom code

gsap.to(zoomImage, {
  scale: targetScale,
  x: isZoomed ? 0 : deltaX * targetScale,
  y: isZoomed ? 0 : deltaY * targetScale,
  duration: 1,
  ease: 'power2.inOut',
  onComplete: () => {
    console.log('zoom end');
  },
});