CSS-переходы глючат и заикаются в Safari, но отлично работают в Chrome ⇐ CSS

[Anonymous]

Это мой первый пост здесь, поэтому извините, если что-то отформатировано неправильно.
CSS:

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

.para {
position: absolute;
pointer-events: none;
transition: transform 0.45s cubic-bezier(.2,.49,.32,.99) 0s;
-webkit-transition: transform 0.45s cubic-bezier(.2,.49,.32,.99) 0s;
}

JavaScript:

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

const para_el = document.querySelectorAll(".para");
let xVal = 0, yVal = 0;

window.addEventListener("mousemove", (e) => {
xVal = e.clientX - window.innerWidth / 2;
yVal = e.clientY - window.innerHeight / 2;

para_el.forEach(el => {
let speedx = el.dataset.speedx;
let speedy = el.dataset.speedy;
el.style.transform = `translateX(calc(-50% + ${-xVal * speedx}px)) translateY(calc(-50% + ${yVal * speedy}px))`;
})
})

Приведенный выше код предназначен для эффекта параллакса. он отлично работает в Chrome, но не в Safari. Он отлично работает в обоих браузерах, пока я не добавлю CSS перехода, но после этого Safari отказывается правильно его отображать. Он глючит и заикается, как будто Safari на долю секунды думает, что курсор находится где-то в другом месте, прежде чем вернуть все туда, где оно должно быть. Я потратил более 2 часов на устранение этой проблемы и ничего не добился. Я не думаю, что это проблема с веб-китом, поскольку, насколько я знаю, Chrome также использует веб-кит в MacOS (поскольку -webkit-transition: 0s; отключает переход в обоих браузерах). Это ошибка Safari или Safari просто по какой-то причине обрабатывает мой CSS иначе, чем в любом другом браузере? Спасибо.

Подробнее здесь: https://stackoverflow.com/questions/765 ... -in-chrome