CSS Transform-Origin + Scale вызывает смещение при масштабировании до точки курсора ⇐ Html

[Anonymous]

Я пытаюсь реализовать функцию увеличения/уменьшения масштаба для обычных элементов div (не холста), используя свойства CSS преобразования происхождения и масштабирования. Все работает как положено, за исключением того, что после изменения координат курсора и последующего изменения размера происходит некоторое смещение. После этого увеличение и уменьшение масштаба работает нормально. Проблема повторяется после перемещения курсора. Чем больше уровень масштабирования, тем больше смещение. У меня возникли трудности с определением шаблона и корректировкой значений, которые я передаю в Transform-origin.
https://stackblitz.com/edit/web-platfor ... ile=script. js

Код: Выделить всё

const container = document.querySelector('.container');
const map = document.querySelector('.map');

const scaleStep = 0.2;
let scale = 1;

container.addEventListener('wheel', (event) => {
event.preventDefault();

if (!event.ctrlKey) {
return;
}

event.deltaY < 0 ? (scale += scaleStep) : (scale -= scaleStep);

const originX = container.scrollLeft + event.clientX;
const originY = container.scrollTop + event.clientY;

map.style.transformOrigin = `${originX}px ${originY}px`;
map.style.transform = `scale(${scale})`;
});

Моя цель — избавиться от этого «прыжка» курсора.

Подробнее здесь: https://stackoverflow.com/questions/772 ... rsor-point