JavaScript无法在Chrome / Firefox中运行，但在Safari中可以正常运行

Question

我正在网站上的图像叠加部分。元素中包含三幅图像，这些图像通过使用滚动条位置水平调整元素的大小来一次堆叠和显示一次。它可以在Safari中完美运行，但不能在Chrome / Firefox中运行。

我已经通过w3c验证程序运行了代码，并解决了所有问题，但是我仍然遇到相同的问题...在Safari中可以使用，但不能在Chrome / Firefox中使用。

如果有人可以在下面为我查看代码，我将非常感激。

预先感谢

克里斯

---

var xyz;
var slide1Width = $("#slide1").width();

var slide2Width = $("#slide2").width();
var slide3Width = $("#slide3").width();
var counter = 0;

$(document).ready(function(e) {

  /////////Slide scroll-resize activation/////////
  $(window).scroll(function(e) {

    var slide1Height = $("#slide1").height();


    xyz = $("body").scrollTop();
    $("#inputs").text(xyz);

    //When slide1 scroll-resize is enabled
    if (xyz <= slide1Width && xyz >= 50) {
      $("#slide2").css({
        "width": xyz
      });
    };

    //When slide2 scroll-resize is enabled
    if (xyz >= slide1Width * 2 + 25 && xyz <= slide1Width * 3) {
      $("#slide3").css({
        "width": xyz - slide1Width * 2
      });
    };

    var video = document.getElementById("video");
    video.currentTime = (xyz - slide1Width) / 55;

    if (xyz >= slide1Width && xyz < slide1Width * 2) {
      $("#video").css({
        "visibility": "visible"
      });
    } else {
      $("#video").css({
        "visibility": "hidden"
      });
    };

    $("#video").height($("#slide1").height());
    /*$("#video").width($("#slide1").width());*/

  });



});

window.onload = function(e) {




  var x = $("#slide1").width();
  var y = $("#slide1").innerHeight();



  $("#slide2").resizable({
    containment: "parent",
    minWidth: 50,
    stop: function(event, ui) {
      $("body").scrollTop($(this).width());
    }
  });

  $("#slide2").css({

    "height": y,
    "width": 50

  });

  $("#slide3").resizable({
    containment: "parent",
    minWidth: 25,
    stop: function(event, ui) {
      $("body").scrollTop($(this).width() + x);

    }
  });

  $("#slide3").css({

    "height": y,
    "width": 25

  });

  ///////////Slide 3 click behaviour////////////

  //Single click//

  $("#slide3").click(function(e) {
    $("body").scrollTop($("#slide1").width() * 2 + $(this).width());
  });

  //Double click//

  $("#slide3").dblclick(function(e) {
    $("body").scrollTop($("#slide2").width());
  });


  ///////////Slide 2 click behaviour////////////

  //Single click//

  $("#slide2").click(function(e) {
    $("body").scrollTop($(this).width());



  });



};

$(window).resize(function() {

  var x = $("#slide1").width();
  var y = $("#slide1").innerHeight();
  var z = $("#slide2").width();
  var slide3width = $("#slide3").width();

  var result = z / x;
  var b = result * 100;
  var c = b.toString() + "%";

  var result3 = slide3width / x;
  var slide3percentInt = result3 * 100;
  var slide3percentString = slide3percentInt.toString() + "%";



  $("#slide2").css({
    "height": y,
    "width": c

  });

  $("#slide2").resizable({
    minWidth: 50,
    containment: "parent"

  });

  $("#slide3").css({
    "height": y,
    "width": slide3percentString

  });

  $("#slide3").resizable({
    minWidth: 25,
    containment: "parent"

  });


});

body {
  background-color: black;
  height: 5000px;
}

#box1 {
  width: 100%;
  height: 100px;
  background-color: black;
}

#wrapper {
  position: fixed;
  width: 80%;
  height: auto;
  margin: auto;
  left: 10%;
}

img {
  width: 100%;
  height: auto;
  z-index: 1;
}

#slide1 {
  position: absolute;
  float: left;
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
  border: none;
  z-index: 1;
}

#slide2 {
  position: absolute;
  float: left;
  padding: 0;
  margin: 0;
  border: none;
  background-image: url("WESetBW.svg");
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 2;
}

#slide3 {
  position: absolute;
  padding: 0;
  margin: 0;
  border: none;
  background-image: url("WESetViz.svg");
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 4;
}

#video {
  position: relative;
  float: left;
  margin: 0;
  border: none;
  z-index: 3;
  visibility: hidden;
  width: 100%;
  object-fit: cover;
}

#inputs {
  height: 20px;
  width: 100px;
  background-color: white;
  color: red;
  position: fixed;
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

  <title>Untitled Document</title>
</head>

<body>
  <div id="wrapper">

    <div id="box1">
    </div>

    <div id="slide1">
      <img src="WESet-photo.svg" alt="World's End set" />

    </div>

    <div id="slide2">
    </div>

    <div id="slide3">
    </div>

    <video id="video">
      		<source src="WEsetOriginalVideo.mp4" type="video/mp4">
      		Your browser does not support the video tag.
    	</video>

  </div>
  <div id="inputs">

  </div>

  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
</body>

</html>