I have this problem, my image is very lagy when i'm scaling it using the transform: scale(); property in CSS. I'm scaling the picture from 0 to 1.

My picture is downsize by a lot so I don't think the problem could come from here.

Here's a video of the actual problem : lag image video

Here is the HTML :

<div class="picture-container first-part">
          <div
            class="picture-frame first-part"
            :style="{
              width: pictureFrameWidth + '%',
              height: pictureFrameHeight + 'vh',
            }"
          >
            <img
              src="../assets/pictures/cathedrale.jpg"
              alt="picture of Notre Dame de Reims"
              class="picture top-left"
              id="firstPic"
              :style="{ transform: 'scale(' + pictureScale + ')' }"
            />
          </div>
        </div>

CSS:

.picture-container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  justify-self: center;
  align-items: center;

  width: 40%;
  height: 100vh;
}
.picture-container.first-part {
  position: sticky;

  top: 0px;
}
.picture-frame {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;

  padding: 5%;

  border: solid 1px var(--color);
}
.picture {
  z-index: 1;
  width: 100%;
  height: 100%;
}

JS :

constrain(n, high, low) {
      return Math.max(Math.min(n, high), low);
    },
resizePicture() {
  this.pictureScale = window.scrollY / 1500 - 0.75;
      let constrainedPictureScale = this.constrain(this.pictureScale, 1, 0);
      this.pictureScale = constrainedPictureScale;
}

I'm calling the resizePicture() function when the user scroll.

So if you have any idea of how I could optimize this or do it in a different way, I just don't want this lag.