我正在尝试实现视差，但在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>