Blinked image when cursor enter in the image

Question

I am making a simple zoom effect when the cursor moves over the image, the only problem I have is that when the cursor enters the image it starts to blink.

Estoy haciendo un efecto de zoom sencillo cuando se desplace el cursor sobre la imagen, el único inconveniente que tengo es que cuando el cursor va entrando a la imagen este empieza a parpadear.

This is in a shopify store, I don't have access to the img tag, only can work with this classes.

I try to change the transform origin and add a backface but the problem persist.

Javascript:

function habilitarZoom() {
    const images = document.getElementsByClassName('rimage__image');
  
    for (let i = 0; i < imagenes.length; i++) {
      const image = imagenes[i];
      const container = image.parentNode;
  
      contenedor.addEventListener('mousemove', function(event) {
        const containerRect = container.getBoundingClientRect();
        const imageRect = image.getBoundingClientRect();
  
        const offsetX = (event.clientX - containerRect.left) / containerRect.width;
        const offsetY = (event.clientY - containerRect.top) / containerRect.height;
  
        const translateX = (imageRect.width - contenedorRect.width) * offsetX;
        const translateY = (imageRect.height - contenedorRect.height) * offsetY;
  
        image.style.transformOrigin = `${offsetX * 50}% ${offsetY * 50}%`;
        image.style.transform = `scale(2.5) translate(${-translateX}px, ${-translateY}px)`;
      });
  
      contenedor.addEventListener('mouseout', function() {
        image.style.transformOrigin = 'center center';
        image.style.transform = 'scale(1) translate(0, 0)';
      });
    }
  }

document.addEventListener('DOMContentLoaded', function() {
    habilitarZoom();
});

CSS:

.rimage__image {
  transition: transform 3s ease;
}

.rimage__image:hover {
  transform: scale(2.5);
  }

.rimage-wrapper{
  overflow: hidden;
}