firefox中的视差图像问题

Question

我正在做一个基于鼠标移动的parallaxing 3个图像的项目。 在Chrome和Internet Explorer中它工作正常，但我的问题是firefox！

视差鼠标移动效果不像firefox那样有效，我该如何解决问题。 firefox使效果只能在上下运动，就像用鼠标自动滚动一样。如果鼠标是3D空间中的相机，效果应该像使用鼠标一样移动。

＆＃13;

＆＃13;

$(document).ready(function() {
  var movementStrength = 15;
  var height = movementStrength / $(window).height();
  var width = movementStrength / $(window).width();
  $("#logo-image").mousemove(function(e) {
    var pageX = e.pageX - ($(window).width() / 2);
    var pageY = e.pageY - ($(window).height() / 2);
    var newvalueX = width * pageX * -1 - 25;
    var newvalueY = height * pageY * -1 - 50;
    $('#logo-image').css("background-position", newvalueX + "px " + newvalueY + "px");
  });
});

$(document).ready(function() {
  var movementStrength = 10;
  var height = movementStrength / $(window).height();
  var width = movementStrength / $(window).width();
  $("#mos").mousemove(function(e) {
    var pageX = e.pageX - ($(window).width() / 2);
    var pageY = e.pageY - ($(window).height() / 2);
    var newvalueX = width * pageX * -1 - 25;
    var newvalueY = height * pageY * -1 - 50;
    $('#mos').css("background-position", newvalueX + "px " + newvalueY + "px");
  });
});

$(document).ready(function() {
  var movementStrength = 5;
  var height = movementStrength / $(window).height();
  var width = movementStrength / $(window).width();
  $("#bottom-image").mousemove(function(e) {
    var pageX = e.pageX - ($(window).width() / 2);
    var pageY = e.pageY - ($(window).height() / 2);
    var newvalueX = width * pageX * -1 - 25;
    var newvalueY = height * pageY * -1 - 50;
    $('#bottom-image').css("background-position", newvalueX + "px " + newvalueY + "px");
  });
});

＆＃13;

#bottom-image {
  background: url('bgpalms.jpg') -25px -50px;
  display: block;
  position: fixed;
  background-repeat: no-repeat;
  top: 0;
  width: 100%;
  z-index: 0;
  height: 100%;
  background-size: calc(100% + 50px);
}

#logo-image {
  background: url('palms_kungen_1.png') -25px -50px;
  margin: 0 auto 0 auto;
  background-repeat: no-repeat;
  top: 0;
  width: 50%;
  z-index: 0;
  height: 100%;
  background-size: calc(100% + 50px);
}

#mos {
  background: url('mos.png') -25px -50px;
  /*margin: 0 auto 0 auto;*/
  display: block;
  position: fixed;
  background-repeat: no-repeat;
  top: 0;
  width: 100%;
  z-index: 0;
  height: 100%;
  background-size: calc(100% + 50px);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="bottom-image">
  <div id="mos">
    <div id="logo-image"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;