Я пытаюсь реализовать параллакс, но он не работает гладко на Firefox и Mac Safari 11

Question

Я новичок в мире параллакса. Мне нужно реализовать эффекты параллакса на одном сайте. Я видел несколько примеров и нашел ниже полезным для меня. Но это хорошо работает в Chrome, но в Safari 11 и Firefox эффект параллакса изображения не плавный, его подергивание происходит всякий раз, когда его положение обновляется при прокрутке. Может ли кто-нибудь помочь в этом? Пожалуйста, найдите ниже пример: - Мне просто нужно, чтобы это работало гладко в Safari 11 и Firefox. Проверьте это.

https://codepen.io/javierbeginesgomez/pen/dvVwoz

$(window).on('load', function() {
  $(".loader").delay(7000).hide();
  $(".container").delay(2000).fadeIn(1);
});

/*Pruebas*/

var parallax = document.querySelectorAll(".parallax");
var speed = -0.25;

window.onscroll = function() {
  [].slice.call(parallax).forEach(function(el, i) {

    var windowYOffset = window.pageYOffset,
      elBackgrounPos = "50% " + (windowYOffset * speed + i * 200) + "px";

    el.style.backgroundPosition = elBackgrounPos;

  });
};

body {
  margin: 0;
}

.container {
  display: none;
}

.parallax {
  min-height: 600px;
  margin: 0;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

p {
  background-color: white;
  color: Grey;
  padding: 100px;
  margin: 0;
  font-size: 50px;
  font-family: 'Open Sans Condensed', sans-serif;
  letter-spacing: 16px;
}

.fondo1 {
  background-image: url("http://www.intrawallpaper.com/static/images/hd_wallpapers_hd10.jpg");
}

.fondo2 {
  background-image: url("http://cdn.wallpapersafari.com/22/85/kwGbHB.jpg");
  background-position: 50% 200px;
}

.fondo3 {
  background-image: url("https://wallpaperscraft.com/image/snow_leopard_face_big_cat_predator_65466_3840x2160.jpg");
  background-position: 50% 400px;
}

.fondo4 {
  background-image: url("https://www.walldevil.com/wallpapers/a49/snow-christmas-town-church.jpg");
  background-position: 50% 600px;
}

::-webkit-scrollbar {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="parallax fondo1"></div>
  <p>
    Parallax Test
  </p>
  <div class="parallax fondo2"></div>
  <p>
    Parallax Test
  </p>
  <div class="parallax fondo3"></div>
  <p>
    Parallax Test
  </p>
  <div class="parallax fondo4">
  </div>
</div>