Laggy Photo Gallery Like Scaling Animation of Images in Phones Only

Question

I have created a website called xavier-banpur.co.in. In its Gallery page (xavier-banpur.co.in/gallery.html), I have an animation which grows the image from its initial size & position to the full screen as it happens in any phone gallery app. It works smoothly on any desktop or laptop. But it lags like hell, the image jumps while growing on any phone.

Please help me detect what is the issue.

My Code

• I am using a grid with grid-template-columns: repeat(auto-fit, minmax(min(30%, 130px), 1fr)); (for the responsive width of the photos) as the parent of the photos.

• Each photo always has top: var(--t); height: var(--h), etc (same for width & left also), among which the top & left take effect only when I assing position: fixed to the photo on click. ON click, I assign it correctly all its variables (--t, --h, --w, --l) to their inital values (from offsetTops & getBoundingClientRect()s) & give it position: fixed for them to take effect. I also create a clone of the photo to appear in its place while it is growing & prevent other photos from taking its place. And finally give it a class of "grow" (i am sharing its css later in this post)

This is the click event listener of the photos (variable glower refers to the photo div)-

            savedI = i - 1;
            currentGlower = null;

            if (document.querySelector(".glow.grow") || animating) return;
            animating = true;
            const glower2 = glower.cloneNode();
            glower2.innerHTML = glower.innerHTML;

            glower.insertAdjacentElement("afterend", glower2);
            glower2.querySelector("img").addEventListener("click", clickFn);
            const top = glower.getBoundingClientRect().top;
            const left = glower.getBoundingClientRect().left;

            glower.style.position = "fixed";
            glower.style.setProperty("--t", top + "px");
            glower.style.setProperty("--l", left + "px");
            glower.style.setProperty("--h", glower2.offsetHeight + "px");
            glower.style.setProperty("--w", glower2.offsetWidth + "px");
            setTimeout(() => glower.classList.add("grow"));
            setTimeout(() => (animating = false), 1000);
          };```

- And lastly here is the most doubtable code, the code of .glow.grow (each photo has .grow class)
```.glow.grow {
      transition: 01s;
      width: min(calc(100vw - 3px), 400px);
      transform: translate(
        calc(calc(50vw - 50%) - var(--l)),
        calc(var(--t) * -1)
      ); // using transform instead of top or left as suggested by people in the internet
      height: 100vh;
      z-index: 10;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: auto;
    }```

- Please answer this question assuming that there is not mistake in calculation or assignment of the --t, --l, --w or --h variables