Анимация JQuery работает на рабочем столе, но не работает и работает медленно в сафари на мобильных устройствах.

Question

Я закодировал анимацию, когда она видна, но на мобильных устройствах Safari и Chrome коды делают браузер очень медленным и работают немного позже, не вовремя, как я могу это исправить?

Я использую jQuery и минимальные файлы начальной загрузки из CDN

Я пытался установить мобильную версию jQuery, но она все та же они хорошо работают в настольном браузере

;
(function($, win) {
  $.fn.inViewport = function(cb) {
    return this.each(function(i, el) {
      function visPx() {
        var H = $(this).height(),
          r = el.getBoundingClientRect(),
          t = r.top,
          b = r.bottom;
        return cb.call(el, Math.max(0, t > 0 ? H - t : (b < H ? b : H)));
      }
      visPx();
      $(win).on("resize scroll", visPx);
    });
  };
}(jQuery, window));



$(".box").inViewport(function(px) {
  if (px) $(this).addClass("triggeredCSS3");
});

.box {
  width: 300px;
  height: 300px;
  margin: 500px 50px;
  background: red;
  transition: 1.5s;
}

.rotate.triggeredCSS3 {
  transform: rotate(360deg);
}

.scale.triggeredCSS3 {
  transform: scale(1.6);
}

.translate.triggeredCSS3 {
  transform: translate3d(400px, 0, 0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box rotate"></div>
<div class="box scale"></div>
<div class="box translate"></div>

Я хочу знать, если это не проблема с кодом, какие из них я должен изменить.