JavaScript touch event listeners on iOS do not register quick swipes

Question

Im implementing simple swipe events with touchstartandtouchend its working fine on Androis but on IOS 13, 14, 15 it`s registering swipes only if you make them slow. Here is my js code maybe you can spot my issue or now sollution.

const carousel_wrapper = document.querySelector(".carousel");
const carousel = document.querySelector(".wheel-container");
const slides = document.querySelectorAll(".slide");
const controlLinks = document.querySelectorAll(".controls-container a");

let touchStartY = 0;
let accumulatedDeltaY = 0;
let threshold = 0;

function updateCarousel(deltaY, threshold) {
  accumulatedDeltaY += deltaY;

  // Check if the accumulated delta exceeds the threshold
Math.abs(accumulatedDeltaY) >= threshold
? (() => {
    const currentIndex = getCurrentIndex();

    // Calculate the target slide based on scroll direction
    const targetIndex = calculateTargetIndex(currentIndex);

    // Update carousel rotation and active slides
    rotateCarousel(targetIndex);
    activeSlideChanger(targetIndex);

    // Reset the accumulated delta
    accumulatedDeltaY = 0;
  })()
: null;

}

// Get current active element index
function getCurrentIndex() {
  return Array.from(controlLinks).findIndex((control) =>
    control.classList.contains("active")
  );
}


function calculateTargetIndex(currentIndex) {
  const scrollDirection = Math.sign(accumulatedDeltaY);
  return scrollDirection > 0
    ? Math.min(currentIndex + 1, controlLinks.length - 1)
    : Math.max(currentIndex - 1, 0);
}

// Rotate carousele 
function rotateCarousel(targetIndex) {
  const rotationAngle = targetIndex * 90;
  carousel.style.transform = `rotate(${rotationAngle}deg)`;
  slides.forEach((slide, slideIndex) => {
    const slideRotation = -rotationAngle;
    slide.style.transform = `rotate(${slideRotation}deg)`;
  });
}

// Change active slide
function activeSlideChanger(targetIndex) {
  document.querySelector(".slide.active").classList.remove("active");
  const activeSlide = document.querySelector(
    `.slide:nth-child(${controlLinks[targetIndex].dataset.index})`
  );
  activeSlide.classList.add("active");
  document.querySelector("a.active").classList.remove("active");
  controlLinks[targetIndex].classList.add("active");
}

// Add control on wheel scroll (desktop)
carousel_wrapper.addEventListener("wheel", (event) => {
  const deltaY = event.deltaY;
  threshold = 200;
  updateCarousel(deltaY, threshold);
});

//Add control on touch start (mobile)
document.addEventListener("touchstart", function (event) {
  threshold = 0;
  touchStartY = event.touches[0].clientY;
  accumulatedDeltaY = 0;
}, false);

// Add control on touch end (mobile)
document.addEventListener("touchend", function (event) {
  const touchEndY = event.changedTouches[0].clientY;
  const deltaY = touchEndY - touchStartY;
  updateCarousel(-deltaY, threshold);
}, false);

Tried adding stuff like: html { touch-action: manipulation; } and some other solutions, but nothing seems to work for me.