Tengo un problema con la expansión del ancho del panel lateral en JavaScript:

Necesito cambiar el tamaño en el evento mousemove pero el rendimiento visual de cambiar el ancho (como el.style.width = value ) es mucho mejor que cambiar la propiedad personalizada (como style.setProperty('--side-panel-width, value) ) - En realidad, el segundo está helado :(

Sin embargo, quiero cambiar la propiedad personalizada, porque el posicionamiento de otros 2 paneles depende de este valor de propiedad personalizada:

 .other-panel { left: calc(var(--side-panel-width) + var(--offset)); }

Mi código del controlador de eventos mousemove (simplificado):

 onMouseMove(e) { requestAnimationFrame(() => const parent = this.$refs.resize.parentNode; const dx = this.size - ex; this.size = ex; const value = (parseInt(getComputedStyle(parent, '').width) + dx); parent.style.width = value + 'px'; // CHANGE WIDTH DIRECTLY // this.app.style.setProperty('--side-panel-width', value + 'px'); // OR CHANGE CUSTOM PROPERTY ) }

Por favor, ¿puede explicar por qué ocurre este problema de rendimiento y hay alguna forma de resolverlo sin cambiar el ancho directamente?

UPD:

• Simplifiqué mi código para el controlador de eventos para hacerlo más esencial
• Apliqué will-change: width; Propiedad CSS a .side-panel también