Javascript Safari上的视差问题-图片跳跃

我做了视差效果，但在Safari浏览器上不能正常工作。我对Safari上的视差有问题，图像跳跃，我怀疑问题在于：“背景附件：修复”

在此处预览：

这个问题有什么解决办法吗。。。？ 我真的很感激，谢谢你的帮助

HTML

JS

   <div class="main__services">
    <section class="container">
      <h2 class="main__services-title">Nasze Usługi</h2>

      <div class="main__services-parallax">

        <div class="main__services-parallax__box main__services-parallax__box--first">

          <div class="main__services-parallax__box-clip main__services-parallax__box-clip--first main__services-parallax__box-clip--one">
            <figure class="main__services-parallax__box-img main__services-parallax__box-img--first observable"></figure>
          </div>

          <div class="main__services-parallax__box-clip main__services-parallax__box-clip--second main__services-parallax__box-clip--two">
            <div class="main__services-parallax__box-wrap">
              <h3 class="main__services-parallax__box-wrap__title">Konserwacja urządzeń elektroenergetycznych</h3>
              <p class="main__services-parallax__box-wrap__text">Konserwacja urządzeń elektrycznych jest elementem niezbędnym prawidłowego utrzymania ruchu w zakładach produkcyjnych. Bez przestoju w produkcji.</p>
              <button class="main__services-parallax__box-wrap__btn"><a href="konserwacja.html" class="main__services-parallax__box-wrap__anchor">Więcej</a></button>
            </div>
          </div>
        </div>

        <div class="main__services-parallax__box main__services-parallax__box--second">
          <div class="main__services-parallax__box-clip main__services-parallax__box-clip--third main__services-parallax__box-clip--one">
            <figure class="main__services-parallax__box-img main__services-parallax__box-img--second observable"></figure>
          </div>

          <div class="main__services-parallax__box-clip main__services-parallax__box-clip--fourth main__services-parallax__box-clip--two main__services-parallax__box-clip--two-color">
            <div class="main__services-parallax__box-wrap main__services-parallax__box-wrap--second">
              <h3 class="main__services-parallax__box-wrap__title">Czyszczenie urządzeń elektrycznych</h3>
              <p class="main__services-parallax__box-wrap__text">Stosujemy technologię opartą na innowacyjnym medium czyszczącym, którego głównym elementem jest specjalnie przygotowywana na rampie gazowej samochodu technologicznego, mieszanka gazów.</p>
              <button class="main__services-parallax__box-wrap__btn"><a href="czyszczenie.html">Więcej</a> </button>
            </div>
          </div>
        </div>

        <div class="main__services-parallax__box main__services-parallax__box--third">
          <div class="main__services-parallax__box-clip main__services-parallax__box-clip--fifth main__services-parallax__box-clip--one">
            <figure class="main__services-parallax__box-img main__services-parallax__box-img--third observable"></figure>
          </div>

          <div class="main__services-parallax__box-clip main__services-parallax__box-clip--sixth main__services-parallax__box-clip--two">
            <div class="main__services-parallax__box-wrap main__services-parallax__box-wrap--third">
              <h3 class="main__services-parallax__box-wrap__title">Czyszczenie hydrodynamiczne</h3>
              <p class="main__services-parallax__box-wrap__text">Poprawa efektywności oraz bezpieczeństwa działania zakładów naszych Klientów, poprzez stosowaną przez nas technologię czyszczenia powierzchni z wykorzystaniem wysokich ciśnień, która pozwala szybko i skutecznie usuwać wszelkie zabrudzenia. Nasze rozwiązania znajdują szerokie zastosowanie niemal we wszystkich gałęziach przemysłu. Korzystając z mobilnych agregatów i specjalistycznych dysz, możemy docierać do trudno dostępnych miejsc.</p>
              <button class="main__services-parallax__box-wrap__btn"><a href="czyszczenie-hydrodynamiczne.html">Więcej</a></button>
            </div>
          </div>
        </div>

        <div class="main__services-parallax__box main__services-parallax__box--fourth">
          <div class="main__services-parallax__box-clip main__services-parallax__box-clip--seventh main__services-parallax__box-clip--one">
            <figure class="main__services-parallax__box-img main__services-parallax__box-img--fourth observable"></figure>
          </div>

          <div class="main__services-parallax__box-clip main__services-parallax__box-clip--eighth main__services-parallax__box-clip--two main__services-parallax__box-clip--two-color">
            <div class="main__services-parallax__box-wrap main__services-parallax__box-wrap--fourth">
              <h3 class="main__services-parallax__box-wrap__title">Czyszczenie popożarowe</h3>
              <p class="main__services-parallax__box-wrap__text">Innowacyjna metoda suchej mieszanki gazów, pozwala
                na 100% usunięcia sadzy z podzespołów. Czas usunięcia awarii
                wywołanej przez pożar, jest bardzo krótki. Metoda 3ns zapobiega także korozji.</p>
              <button class="main__services-parallax__box-wrap__btn"><a href="czyszczenie-pozarowe.html" class="main__services-parallax__box-wrap__anchor">Więcej</a></button>
            </div>
          </div>
        </div>

        <div class="main__services-parallax__box main__services-parallax__box--fifth">
          <div class="main__services-parallax__box-clip main__services-parallax__box-clip--ninth main__services-parallax__box-clip--one">
            <figure class="main__services-parallax__box-img main__services-parallax__box-img--fifth observable"></figure>
          </div>

          <div class="main__services-parallax__box-clip main__services-parallax__box-clip--tenth main__services-parallax__box-clip--two">
            <div class="main__services-parallax__box-wrap main__services-parallax__box-wrap--fifth">
              <h3 class="main__services-parallax__box-wrap__title">Pomiary termowizyjne i elektryczne</h3>
              <p class="main__services-parallax__box-wrap__text">Kompleksowe wykonanie pomiarów instalacji elektro-energetycznych. W ramach usługi jesteśmy w stanie przygotować raport obejmujący analizę stanu technicznego podzespołów na bazie pomiarów termowizyjnych oraz pomiarów elektrycznych.</p>
              <button class="main__services-parallax__box-wrap__btn"><a href="pomiary.html">Więcej</a></button>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

  .main__services {
      padding-top: 3.75rem;
    }

    @media (min-width: 1920px) {
      .main__services {
        padding-top: 10.4375rem;
      }
    }

    .main__services-title {
      font-family: "akrobatblack", sans-serif;
      font-size: 1.875rem;
      text-align: center;
    }

    @media (min-width: 640px) {
      .main__services-title {
        font-size: 2.1875rem;
      }
    }

    @media (min-width: 768px) {
      .main__services-title {
        font-size: 2.5rem;
      }
    }

    @media (min-width: 1280px) {
      .main__services-title {
        text-align: left;
        font-size: 2.8125rem;
        padding: 0 0 0 3.75rem;
      }
    }

    @media (min-width: 1440px) {
      .main__services-title {
        padding: 0 0 0 6.25rem;
      }
    }

    @media (min-width: 1600px) {
      .main__services-title {
        padding: 0 0 0 7.5rem;
      }
    }

    @media (min-width: 1920px) {
      .main__services-title {
        padding-left: 8.75rem;
        font-size: 3.375rem;
        text-align: left;
      }
    }

    @media (min-width: 1921px) {
      .main__services-parallax {
        width: 100vw;
        margin: 0 calc(-50vw + 50%);
      }
    }

    .main__services-parallax__box {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: auto;
    }

    @media (min-width: 1280px) {
      .main__services-parallax__box {
        flex-direction: row;
        height: 800px;
      }
      .main__services-parallax__box--second, .main__services-parallax__box--fourth {
        flex-direction: row-reverse;
      }
      .main__services-parallax__box--first {
        clip-path: polygon(0 20%, 100% 0%, 100% 80%, 0% 100%);
        -webkit-clip-path: polygon(0 20%, 100% 0%, 100% 80%, 0% 100%);
      }
      .main__services-parallax__box--second {
        clip-path: polygon(0 calc(100% - 50vw), 100% 0, 100% 100%, 0 80%);
        -webkit-clip-path: polygon(0 calc(100% - 50vw), 100% 0, 100% 100%, 0 80%);
        margin-top: -12.500vw;
      }
      .main__services-parallax__box--third {
        clip-path: polygon(0 0, 100% 20%, 100% 80%, 0 100%);
        -webkit-clip-path: polygon(0 0, 100% 20%, 100% 80%, 0 100%);
        margin-top: -12.500vw;
      }
      .main__services-parallax__box--fourth {
        clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 80%);
        -webkit-clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 80%);
        margin-top: -12.500vw;
      }
      .main__services-parallax__box--fifth {
        -webkit-clip-path: polygon(0 0, 100% calc(100% - 50vw), 100% 100%, 0 80%);
        clip-path: polygon(0 0, 100% calc(100% - 50vw), 100% 100%, 0 80%);
        margin-top: -12.500vw;
      }
    }

    @media (min-width: 1600px) {
      .main__services-parallax__box--second {
        clip-path: polygon(0 calc(100% - 40vw), 100% 0, 100% 100%, 0 80%);
        -webkit-clip-path: polygon(0 calc(100% - 40vw), 100% 0, 100% 100%, 0 80%);
        margin-top: -12.500vw;
      }
      .main__services-parallax__box--fifth {
        -webkit-clip-path: polygon(0 0, 100% calc(100% - 40vw), 100% 100%, 0 80%);
        clip-path: polygon(0 0, 100% calc(100% - 40vw), 100% 100%, 0 80%);
        margin-top: -12.500vw;
      }
    }

    @media (min-width: 1920px) {
      .main__services-parallax__box--second {
        -webkit-clip-path: polygon(0 calc(100% - 56.667vw), 100% 0, 100% 100%, 0 80%);
        clip-path: polygon(0 calc(100% - 56.667vw), 100% 0, 100% 100%, 0 80%);
        margin-top: -9.948vw;
      }
      .main__services-parallax__box--third {
        clip-path: polygon(0 0, 100% 20%, 100% 80%, 0 100%);
        -webkit-clip-path: polygon(0 0, 100% 20%, 100% 80%, 0 100%);
        margin-top: -13.333vw;
      }
      .main__services-parallax__box--fourth {
        clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 80%);
        -webkit-clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 80%);
        margin-top: -13.333vw;
      }
      .main__services-parallax__box--fifth {
        -webkit-clip-path: polygon(0 0, 100% calc(100% - 36.198vw), 100% 100%, 0 80%);
        clip-path: polygon(0 0, 100% calc(100% - 36.198vw), 100% 100%, 0 80%);
        margin-top: -13.333vw;
      }
      .main__services-parallax__box--first, .main__services-parallax__box--fifth {
        min-height: 49.479vw;
      }
      .main__services-parallax__box--second, .main__services-parallax__box--third, .main__services-parallax__box--fourth {
        min-height: 66.667vw;
      }
    }

    .main__services-parallax__box-clip {
      display: block;
      width: 100%;
      position: relative;
      height: 150vw;
    }

    @media (min-width: 640px) {
      .main__services-parallax__box-clip {
        height: 80vw;
      }
    }

    @media (min-width: 1280px) {
      .main__services-parallax__box-clip {
        width: 50%;
        overflow: hidden;
        height: auto;
      }
    }

    .main__services-parallax__box-clip--one {
      overflow: hidden;
    }

    .main__services-parallax__box-clip--two {
      background-color: #ecf3f7;
    }

    .main__services-parallax__box-clip--two-color {
      background-color: #fff;
    }

    .main__services-parallax__box-clip--first {
      clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
      -webkit-clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
      z-index: 1;
      height: 120vw;
    }

    @media (min-width: 640px) {
      .main__services-parallax__box-clip--first {
        height: 80vw;
      }
    }

    @media (min-width: 1280px) {
      .main__services-parallax__box-clip--first {
        clip-path: none;
        height: auto;
      }
    }

    .main__services-parallax__box-clip--second {
      margin-top: -31.250vw;
      height: 160vw;
    }

    @media (min-width: 640px) {
      .main__services-parallax__box-clip--second {
        height: 140vw;
      }
    }

    @media (min-width: 1024px) {
      .main__services-parallax__box-clip--second {
        margin-to: -33.203vw;
        height: 120vw;
      }
    }

    @media (min-width: 1280px) {
      .main__services-parallax__box-clip--second {
        clip-path: none;
        margin-top: 0;
        height: auto;
      }
    }

    @media (min-width: 1920px) {
      .main__services-parallax__box-clip--second {
        height: auto;
      }
    }

    .main__services-parallax__box-clip--third {
      clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%);
      -webkit-clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%);
      margin-top: -37.500vw;
      z-index: 1;
    }

    @media (min-width: 1280px) {
      .main__services-parallax__box-clip--third {
        clip-path: none;
        margin-top: 0;
        z-index: 0;
      }
    }

    .main__services-parallax__box-clip--fourth {
      margin-top: -43.750vw;
      height: 185vw;
    }

    @media (min-width: 640px) {
      .main__services-parallax__box-clip--fourth {
        height: 140vw;
      }
    }

    @media (min-width: 1024px) {
      .main__services-parallax__box-clip--fourth {
        margin-top: -41.016vw;
        height: 130vw;
      }
    }

    @media (min-width: 1280px) {
      .main__services-parallax__box-clip--fourth {
        clip-path: none;
        margin-top: 0;
        height: auto;
      }
    }

    .main__services-parallax__box-clip--fifth {
      clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%);
      -webkit-clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%);
      margin-top: -40.625vw;
      z-index: 1;
    }

    @media (min-width: 1280px) {
      .main__services-parallax__box-clip--fifth {
        clip-path: none;
        margin-top: 0;
        z-index: 0;
      }
    }

    .main__services-parallax__box-clip--sixth {
      margin-top: -50vw;
      height: 250vw;
    }

    @media (min-width: 640px) {
      .main__services-parallax__box-clip--sixth {
        margin-top: -34.688vw;
        height: 140vw;
      }
    }

    @media (min-width: 1024px) {
      .main__services-parallax__box-clip--sixth {
        margin-top: -33.203vw;
        height: 120vw;
      }
    }

    @media (min-width: 1280px) {
      .main__services-parallax__box-clip--sixth {
        clip-path: none;
        margin-top: 0;
        height: auto;
      }
    }

    .main__services-parallax__box-clip--seventh {
      clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%);
      -webkit-clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%);
      margin-top: -33.438vw;
      z-index: 1;
    }

    @media (min-width: 1280px) {
      .main__services-parallax__box-clip--seventh {
        clip-path: none;
        margin-top: 0;
        z-index: 0;
      }
    }

    .main__services-parallax__box-clip--eighth {
      margin-top: -33.438vw;
      height: 160vw;
    }

    @media (min-width: 640px) {
      .main__services-parallax__box-clip--eighth {
        height: 140vw;
      }
    }

    @media (min-width: 1024px) {
      .main__services-parallax__box-clip--eighth {
        margin-top: -33.203vw;
        height: 120vw;
      }
    }

    @media (min-width: 1280px) {
      .main__services-parallax__box-clip--eighth {
        clip-path: none;
        margin-top: 0;
        height: auto;
      }
    }

    .main__services-parallax__box-clip--ninth {
      clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
      -webkit-clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
      z-index: 1;
      margin-top: -33.438vw;
    }

    @media (min-width: 1280px) {
      .main__services-parallax__box-clip--ninth {
        clip-path: none;
        margin-top: 0;
        z-index: 0;
      }
    }

    .main__services-parallax__box-clip--tenth {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
      -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
      margin-top: -33.438vw;
      height: 200vw;
    }

    @media (min-width: 640px) {
      .main__services-parallax__box-clip--tenth {
        margin-top: -14.063vw;
        height: 95vw;
      }
    }

    @media (min-width: 1024px) {
      .main__services-parallax__box-clip--tenth {
        margin-top: -11.719vw;
        height: 75vw;
      }
    }

    @media (min-width: 1280px) {
      .main__services-parallax__box-clip--tenth {
        clip-path: none;
        margin-top: 0;
        height: auto;
      }
    }

    @media (min-width: 1920px) {
      .main__services-parallax__box-clip--tenth {
        height: auto;
      }
    }

    .main__services-parallax__box-img {
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-size: cover;
      -webkit-background-size: cover;
      background-position: center;
      pointer-events: none;
      z-index: -1;
    }

    @media (min-width: 1280px) {
      .main__services-parallax__box-img {
        position: absolute;
        background-attachment: fixed;
        z-index: 0;
        transform: scale(1.2) translate3D(0, calc((var(--scroll-y) - var(--offset-y)) * -0.08 * 1px), 0);
        -webkit-transform: scale(1.2) translate3D(0, calc((var(--scroll-y) - var(--offset-y)) * -0.08 * 1px), 0);
        will-change: transform;
        -webkit-backface-visibility: hidden;
        -webkit-perspective: 1000;
      }
    }

    @media (min-width: 1920px) {
      .main__services-parallax__box-img {
        height: 100%;
      }
    }

    .main__services-parallax__box-img--first {
      background-image: url("../images/img_1.jpg");
    }

    .main__services-parallax__box-img--second {
      background-image: url("../images/img_2.jpg");
    }

    .main__services-parallax__box-img--third {
      background-image: url("../images/img_3.jpg");
      background-position: 70% center;
    }

    @media (min-width: 1280px) {
      .main__services-parallax__box-img--third {
        background-position: -26.172vw center;
      }
    }

    @media (min-width: 1440px) {
      .main__services-parallax__box-img--third {
        background-position: -20.833vw center;
      }
    }

    @media (min-width: 1600px) {
      .main__services-parallax__box-img--third {
        background-position: -18.750vw center;
      }
    }

    @media (min-width: 1920px) {
      .main__services-parallax__box-img--third {
        background-position: -33.333vw center;
      }
    }

    .main__services-parallax__box-img--fourth {
      background-image: url("../images/img_4.jpg");
      background-position: 80% center;
    }

    @media (min-width: 640px) {
      .main__services-parallax__box-img--fourth {
        background-position: 90% center;
      }
    }

    @media (min-width: 1280px) {
      .main__services-parallax__box-img--fourth {
        background-position: 100% center;
      }
    }

    .main__services-parallax__box-img--fifth {
      background-image: url("../images/img_5.jpg");
      background-position: 36% center;
    }

    @media (min-width: 1280px) {
      .main__services-parallax__box-img--fifth {
        background-position: -14.844vw center;
      }
    }

    @media (min-width: 1440px) {
      .main__services-parallax__box-img--fifth {
        background-position: -8.333vw center;
      }
    }

    @media (min-width: 1600px) {
      .main__services-parallax__box-img--fifth {
        background-position: -4.375vw center;
      }
    }

    .main__services-parallax__box-wrap {
      padding: 0 1.25rem;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      text-align: center;
    }

    @media (min-width: 640px) {
      .main__services-parallax__box-wrap {
        padding: 0 2.5rem;
      }
    }

    @media (min-width: 768px) {
      .main__services-parallax__box-wrap {
        padding: 0 3.75rem;
      }
    }

    @media (min-width: 1280px) {
      .main__services-parallax__box-wrap {
        text-align: left;
      }
    }

    @media (min-width: 1440px) {
      .main__services-parallax__box-wrap {
        padding: 0 6.25rem;
      }
    }

    @media (min-width: 1600px) {
      .main__services-parallax__box-wrap {
        padding: 0 7.5rem;
      }
    }

    @media (min-width: 1920px) {
      .main__services-parallax__box-wrap {
        top: 50%;
        transform: translateY(-50%);
        padding: 0 8.75rem;
      }
    }

    .main__services-parallax__box-wrap__title {
      font-family: "akrobatbold", sans-serif;
      font-size: 1.25rem;
      padding-bottom: 1.5rem;
    }

    @media (min-width: 640px) {
      .main__services-parallax__box-wrap__title {
        font-size: 1.5625rem;
      }
    }

    @media (min-width: 768px) {
      .main__services-parallax__box-wrap__title {
        font-size: 1.875rem;
      }
    }

    @media (min-width: 1024px) {
      .main__services-parallax__box-wrap__title {
        font-size: 2.1875rem;
      }
    }

    @media (min-width: 1280px) {
      .main__services-parallax__box-wrap__title {
        font-size: 1.875rem;
      }
    }

    @media (min-width: 1920px) {
      .main__services-parallax__box-wrap__title {
        font-size: 2.5rem;
        padding-bottom: 2.125rem;
      }
    }

    .main__services-parallax__box-wrap__text {
      font-family: "akrobatlight", sans-serif;
      font-size: 1.125rem;
    }

    @media (min-width: 640px) {
      .main__services-parallax__box-wrap__text {
        font-size: 1.25rem;
      }
    }

    @media (min-width: 768px) {
      .main__services-parallax__box-wrap__text {
        font-size: 1.375rem;
      }
    }

    @media (min-width: 1024px) {
      .main__services-parallax__box-wrap__text {
        font-size: 1.5625rem;
      }
    }

    @media (min-width: 1280px) {
      .main__services-parallax__box-wrap__text {
        font-size: 1.25rem;
      }
    }

    @media (min-width: 1920px) {
      .main__services-parallax__box-wrap__text {
        font-size: 1.875rem;
      }
    }

    .main__services-parallax__box-wrap__btn {
      background-color: #1960aa;
      color: #fff;
      padding: 1rem 2rem;
      font-size: 1rem;
      margin-top: 1.5625rem;
      -webkit-box-shadow: -30px 30px 40px 0px rgba(25, 96, 170, 0.21);
      box-shadow: -30px 30px 40px 0px rgba(25, 96, 170, 0.21);
      cursor: pointer;
    }

    @media (min-width: 640px) {
      .main__services-parallax__box-wrap__btn {
        font-size: 1.125rem;
        padding: 1rem 2.5rem;
      }
    }

    @media (min-width: 1920px) {
      .main__services-parallax__box-wrap__btn {
        padding: 1rem 5.75rem;
        font-size: 1.875rem;
        margin-top: 4.6875rem;
      }
    }

    window.addEventListener("DOMContentLoaded", init,  false);

    function init() {
      var scrollY = window.scrollY;
      document.querySelectorAll('.main__services-parallax__box').forEach(function(node) {
        var rect = node.getBoundingClientRect();
        node.style.setProperty('--offset-y', rect.top + scrollY);
      });
      window.addEventListener('scroll', function() {
        document.body.style.setProperty('--scroll-y', window.scrollY);
        document.body.style.setProperty('--scroll-x', window.scrollX);
      });
    }