Как убрать лаги JS-анимации при свайпе по двум осям?

Question

[EvgenyApMr]

Всех приветствую!

Проблема в жестких лагах при перерисовке, когда пользователь свайпает элемент не ровно по оси Х, но добавляет скролл по Y. Суть проблемы на видео.

JS-функция, которая реализует перерисовку ниже. Некоторые коллбеки закоментировал, результата по производительности положительного нет.

function moveS () {

  var evt = getEvent();
  var targetInput, targetInputW, left, right;

  targetInput = targetPrElem.getAttribute('classre');
  targetInput == 'maxPrice' ? targetInputW = 'minPrice' : targetInputW = 'maxPrice';
  left = priceSlide.querySelector('.leftM');
  right = priceSlide.querySelector('.rightM');

  leftM = parseInt(left.style.left);
  rightM = parseInt(right.style.left);

  if (rightM < leftM) {
    leftM = parseInt(right.style.left);
    rightM = parseInt(left.style.left);
    targetInput = targetInputW;
  }

  var newS = startS - (evt.clientX/widthSlide);
  var res = Math.ceil((offsetPrSl - newS)*100)/100;
  
  //slideLine (intoLine, left, right);

  if (res >= 0 && res < maxLeftSlide) {
    targetPrElem.style.left = (res*100)+'%';
    //priceRe (targetInput, maxValForm*res);
  }

  else if (res == maxLeftSlide) {
    targetPrElem.style.left = (res*100)+'%';
    //priceRe (targetInput, maxValForm);
  } 

  else {return}
}

Проверил производительность через DevTools - смущает время, затраченное на анимацию, но посредством нескольких проверок установил, что это не влияет на лаги.



Есть какие-то соображения по реализации аналогичного функционала, но без лагов? Желательно без библиотек и фреймворков.

На элементе стоит touch-action: none, но при более-менее сильном свайпе перестаёт работать, что тоже я пока объяснить не могу.

Большое спасибо!

Comments

[MagicMight]

Можете выложить рабочий кусок на https://codepen.io/?

[Роман Дворянов]

Меняйте свойство translateX, translateY с анимацией, left, right тяжелее используются для анимации, браузеру приходится пересчитывать и перерисовывать их, в то время как translate рисуется на отдельном слое

Если этот вариант не подходит и вам нужно физически менять положение, то присмотритесь к свойству will-change(willChange) (https://developer.mozilla.org/en-US/docs/Web/CSS/w...), оно может помочь