Tengo este problema, mi imagen es muy lenta cuando la estoy escalando usando transform: scale(); propiedad en CSS. Estoy escalando la imagen de 0 a 1.

Mi imagen se ha reducido mucho, así que no creo que el problema pueda venir de aquí.

Aquí hay un video del problema real: lag image video

Aquí está el 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%; }

J.S.:

 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; }

Llamo a la función resizePicture() cuando el usuario se desplaza.

Entonces, si tiene alguna idea de cómo podría optimizar esto o hacerlo de una manera diferente, simplemente no quiero este retraso.