Прокрутка заикания с GSAP в iOS Safari

Question

Я пытался собрать что-то в jQuery в качестве заменителя для ScrollMagic , который прослушивает событие прокрутки и воспроизводит через GSAP TimelineMax на основе позиции прокрутки.

Я нашел скрипт, который преобразует позицию прокрутки из window в проценты, а затем устанавливает позицию прогресса TimelineMax с этим значением. По сути, высота скрытой оболочки (#fake-height) определяет скорость анимации. Чем выше я создаю оболочку, тем дольше будет анимация. Затем анимация происходит в фиксированном div (#holder).

Во всех браузерах для настольных систем, которые я пробовал, все работает как положено. Тем не менее, при попытке кода в iOS Safari, я испытываю заикание прокрутки. Почти как если бы частота кадров анимации в целом стала ниже, чем должна быть. У меня такое ощущение, что это не проблема с производительностью, поскольку анимация работает безупречно, если я просто постоянно перетаскиваю прокрутку iPhone пальцем по экрану, а не проводя по нему пальцем (т.е. перетаскивая и отпуская палец). создать импульс).

Код:

window.scrollTo(0, 0);

$(function() {

  var $window = $(window);
  var documentHeight = $(document).height();
  var windowHeight = $window.height();
  var scrollTop = $window.scrollTop();

  var timeline = new TimelineMax({
      paused: true
    })
    .to("#scene1 .top-left", 1.5, {
      x: -25,
      y: -25,
      rotation: 0.001
    }, "scene1Intro")
    .to("#scene1 .bottom-right", 1.5, {
      x: 25,
      y: 25,
      rotation: 0.001
    }, "scene1Intro")
    .to(".image-fullscreen", 1, {
      scale: 0.6,
      rotation: 0.001
    }, "scene1Intro+=0.5")
    .staggerTo("#scene1 .slide", 1, {
      opacity: 1,
      scale: 2
    }, 1, "scene1Slides")
    .staggerTo("#scene1 .slide", 1, {
      opacity: 0,
      scale: 3
    }, 1, "scene1Slides+=1")

  TweenMax.set(".slide", {
    opacity: 0,
    scale: 1
  })

  TweenLite.defaultEase = Linear.easeNone;

  $window.on("resize", function() {
    windowHeight = $window.height();
  }).resize();

  $window.on("scroll", function() {
    scrollTop = $(window).scrollTop();
    var scrollPercent = (scrollTop) / (documentHeight - windowHeight);
    timeline.progress(scrollPercent).pause()
  });

});

body,
html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #faded7;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#holder {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9999;
}

#fake-height {
  position: relative;
  width: 100%;
  height: 180vh;
}

.scene {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.frame {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.frame-item {
  position: absolute;
}

.frame-inner {
  -webkit-transition: -webkit-transform .1s ease;
  transition: -webkit-transform .1s ease;
  transition: transform .1s ease;
  transition: transform .1s ease, -webkit-transform .1s ease;
}

#scene1 .top-left {
  top: 0;
  left: 0;
  width: 25%;
  position: absolute;
  border: 1px solid red;
}

#scene1 .top-left .frame-inner {
  position: relative;
  width: 100%;
  height: 0;
  background-image: url("http://tobiasgerhardsson.com/code/assets/top-left.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding-top: 196.72489%
}

#scene1 .bottom-right {
  bottom: 0;
  right: 0;
  width: 25%;
  position: absolute;
  border: 1px solid red;
}

#scene1 .bottom-right .frame-inner {
  position: relative;
  width: 100%;
  height: 0;
  background-image: url("http://tobiasgerhardsson.com/code/assets/bottom-right.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding-top: 147.10145%
}

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.image-fullscreen {
  width: 100vw;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
}

.image-fullscreen img {
  width: 100%;
  height: auto;
}

<div class="image-fullscreen">
  <img src="https://lh3.googleusercontent.com/VrPzQ6Z3XK7oDcKn51AbKRAs_4U1wybryBOX62YhXXo3hVQLK9fujO_NtZ2hqUDs8e6KYicmew=w640-h400-e365" alt="">
</div>
<div id="holder">
  <section class="scene" id="scene1">
    <div class="frame">
      <div class="frame-item top-left">
        <div class="frame-inner"></div>
      </div>
      <div class="frame-item bottom-right">
        <div class="frame-inner"></div>
      </div>
    </div>
    <div class="slide">Test</div>
    <div class="slide">Test</div>
    <div class="slide">Test</div>
    <div class="slide">Test</div>
  </section>
</div>

<div id="fake-height"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

Демо: http://www.tobiasgerhardsson.com/code/

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