Скрипт некорректно работает в браузере safari

У меня есть сайт на котором реализовано воспроизведение видео как в инстаграм истории http://hostzadoroshniya.ru/task/

во всех браузерах отображается нормально, но в сафари прогресс бар истории идет медленнее чем сама история, вот видео с сафари https://yadi.sk/i/Ff5ndPWGM_gOBg

вот код в котором проблема

 // Ticking machine
var percentTime; // начальное положение прогрессбара
var tick; // заполняет полоски с указанным интервалом
var time = defaultTime; // время показа одного слайда
var progressBarIndex = 0; // содержит индекс текущей кнопки  
var slidesNumber = 14;
var slides = slidesNumber - 1
var redirect = false; // редирект 
var redirectLink = $('.rdt-a').attr('href'); //ссылка редиректа (отключить отображение на странице через .rdt-a{display:none;}
var redirectTime = 5000; // время редиректа в мс

$('.progressBarContainer .progressBar').each(function (index) {
        var progress = "<div class='inProgress inProgress" + index + "'></div>";
        $(this).html(progress);
});

function startProgressbar() {
  resetProgressbar()

  const ItemsForFill = []

  for (var i = 0; i < progressBarIndex; i++) {
    $('.inProgress').eq(i).css({
      width: '100%'
    })
  }

  currentVideo = $('.slide').eq(progressBarIndex).find('video');
  isVideo = currentVideo.length !== 0;
  if (isVideo) {
    currentVideo[0].play();
    currentVideo.on(
    "timeupdate", 
    function(event){
      time = this.duration
    })
    currentVideo[0].currentTime = 0
  } else {
    $('video').off();
    time = defaultTime
  }

  percentTime = 0;
  tick = setInterval(interval, 10);
}

function interval() {
  if (isPauseProcessing) {
    return;
  }
  if (!($('.slider .slick-track div[data-slick-index="' + progressBarIndex + '"]').hasClass(
    "slick-center"))) {
    progressBarIndex = $('.slider .slick-track div[class="slide slick-slide slick-current slick-center"]')
      .data("slickIndex");
    startProgressbar();
  } else {
    if (stopFlag) {
      if (isVideo) {

      }

      percentTime += 1 / time;
      $('.inProgress' + progressBarIndex).css({
        width: percentTime + "%"
      });

      if (percentTime >= 100) {
        $('.slider').slick('slickNext');
        progressBarIndex++;

        currentVideo = $('.slide').eq(progressBarIndex).find('video')
        isVideo = currentVideo.length !== 0
        if (isVideo) {
          currentVideo.on(
          "timeupdate", 
          function(event) {
            time = this.duration
          })
          currentVideo[0].currentTime = 0
        } else {
          stopProgressbar();  
          $('video').off();
          if(redirect){
            setTimeout(function(){
                $(location).attr('href',redirectLink);
            },redirectTime);
          }  
          time = defaultTime
        }

        if (progressBarIndex > slides) { // если индекс текущей кнопки больше количества слайдов - останавливает воспроизведение
          stopProgressbar()
        } else {
          startProgressbar();
        }
      }
    }

  }
}

Буду очень благодарен любой помощи