视差在IE中不起作用

Question

编辑：我意识到在网站内找到错误可能很难，这就是为什么我在这里只创建构成视差的部分的jsfiddle：https://jsfiddle.net/alFrame/88q5vaas/

虽然这在FireFox和Chrome中完美运行但它在IE中完全崩溃了...不幸的是，这是客户正在使用的，当然效果并没有出售。我有最新的IE浏览器。不要因为我在Windows 7上而感到不满。

我链接了以下javascript库：

jquery.mousewheel.js
jquery.simplr.smoothscroll.js
jquery-1.11.0.min.js
jquery-migrate-1.2.1.min.js 

我使用以下javascript代码：

var body = document.body;
var container = document.getElementById("container");
var blackout = document.getElementById("blackout");
var UntergrenchenbergLogo = document.getElementById("UntergrenchenbergLogo");

var layer0 = document.getElementById("layer-0");
var layer1 = document.getElementById("layer-1");
var layer2 = document.getElementById("layer-2");
var layer3 = document.getElementById("layer-3");
var layer4 = document.getElementById("layer-4");
var layer5 = document.getElementById("layer-5");

function setup()
{
    var platform = navigator.platform.toLowerCase();
    var userAgent = navigator.userAgent.toLowerCase();

    if ( platform.indexOf('ipad') != -1  ||  platform.indexOf('iphone') != -1 ) 
    {
        isTouchscreen = 1;
        container.setAttribute("class", "touch");
        body.style.backgroundImage = 'none';
        UntergrenchenbergLogo.style.position = 'absolute';
    }

    else if (platform.indexOf('win32') != -1 || platform.indexOf('linux') != -1)
    {
        isTouchscreen = 0;

        if ($.browser.webkit)
        {
            $.srSmoothscroll();
        }
    }

    else
    {
        $.srSmoothscroll();
        isTouchscreen = 0;
    }

}

function parallaxy()
{
    offset5 = -(scrollVal * 0.7); // ORG 0.7
    offset4 = -(scrollVal * 0.5); // ORG 0.5
    offset3 = -(scrollVal * 0.4); // ORG 0.3
    offset2 = -(scrollVal * 0.3); // ORG 0.2
    offset1 = -(scrollVal * 0.2); // ORG 0.1
    offset0 = 0;

    layer0.style.webkitTransform = "translate3d(0, " + offset0 + "px, 0)";
    layer0.style.MozTransform = "translate3d(0, " + offset0 + "px, 0)";
    layer0.style.msTransform = "translateY(" + offset0 + "px)";
    layer0.style.OTransform = "translate3d(0, " + offset0 + "px, 0)";
    layer0.style.transform = "translate3d(0, " + offset0 + "px, 0)";

    layer1.style.webkitTransform = "translate3d(0, " + offset1 + "px, 0)";
    layer1.style.MozTransform = "translate3d(0, " + offset1 + "px, 0)";
    layer1.style.msTransform = "translateY(" + offset1 + "px)";
    layer1.style.OTransform = "translate3d(0, " + offset1 + "px, 0)";
    layer1.style.transform = "translate3d(0, " + offset1 + "px, 0)";

    layer2.style.webkitTransform = "translate3d(0, " + offset2 + "px, 0)";
    layer2.style.MozTransform = "translate3d(0, " + offset2 + "px, 0)";
    layer2.style.msTransform = "translateY(" + offset2 + "px)";
    layer2.style.OTransform = "translate3d(0, " + offset2 + "px, 0)";
    layer2.style.transform = "translate3d(0, " + offset2 + "px, 0)";

    layer3.style.webkitTransform = "translate3d(0, " + offset3 + "px, 0)";
    layer3.style.MozTransform = "translate3d(0, " + offset3 + "px, 0)";
    layer3.style.msTransform = "translateY(" + offset3 + "px)";
    layer3.style.OTransform = "translate3d(0, " + offset3 + "px, 0)";
    layer3.style.transform = "translate3d(0, " + offset3 + "px, 0)";

    layer4.style.webkitTransform = "translate3d(0, " + offset4 + "px, 0)";
    layer4.style.MozTransform = "translate3d(0, " + offset4 + "px, 0)";
    layer4.style.msTransform = "translateY(" + offset4 + "px)";
    layer4.style.OTransform = "translate3d(0, " + offset4 + "px, 0)";
    layer4.style.transform = "translate3d(0, " + offset4 + "px, 0)";

    layer5.style.webkitTransform = "translate3d(0, " + offset5 + "px, 0)";
    layer5.style.MozTransform = "translate3d(0, " + offset5 + "px, 0)";
    layer5.style.msTransform = "translateY(" + offset5 + "px)";
    layer5.style.OTransform = "translate3d(0, " + offset5 + "px, 0)";
    layer5.style.transform = "translate3d(0, " + offset5 + "px, 0)";
}

function scrollHandler(e)
{
    scrollVal = Math.max(window.pageYOffset,0);

    if ( isTouchscreen != 1 )
    {
        parallaxy()
    }
}

body.onload = setup();
document.addEventListener('scroll', scrollHandler, false);

function throttle(callback, limit) {
    var wait = false;
    return function() {
        if (!wait) {
            callback.call();
            wait = true;
            setTimeout(function() {
                wait = false;
            }, limit);
        }
    }
}

这个css代码;

/* ****** PARALLAX SECTION ****** */
/*--------------------------------*/
@charset "utf-8";
h1#UntergrenchenbergLogo {
  background-image: url("http://www.dev05.fullframestudios.ch/wp-content/themes/untergrenchenberg/img/Untergrenchenberg_Logo_Type_01.png");
  background-size: 480px 67px;
  background-repeat: no-repeat;
  background-position: center top;
  position: fixed;
  height: 144px;
  width: 100%;
  top: 648px;
  left: 0;
  text-indent: -9999px;
  z-index: 20;
}

#parallax {
  position: relative;
  height: 660px;
  overflow: hidden !important;  /* background-color: #9edcf9; */
  background: -webkit-linear-gradient(#0054a8, #5db5f9, #5db5f9);  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#0054a8, #5db5f9, #5db5f9);  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#0054a8, #5db5f9, #5db5f9);  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#0054a8, #5db5f9, #5db5f9);  /* Standard syntax */
}

.parallax_layer {
  background-position: bottom center;
  background-size: 1920px 960px;
  background-repeat: repeat-x;
  position: fixed;
  height: 960px;
  width: 100%;
  left: 0px;
  overflow: hidden !important;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

#layer-0 {
  background-image: url("http://www.dev05.fullframestudios.ch/wp-content/themes/untergrenchenberg/img/Header_Parallax_HausStrichzeichnung_01_E.png");
  z-index: 10;
}
#layer-1 {
  background-image: url("http://www.dev05.fullframestudios.ch/wp-content/themes/untergrenchenberg/img/Header_Parallax_HausStrichzeichnung_01_D.png");
  z-index: 11;
}
#layer-2 {
  background-image: url("http://www.dev05.fullframestudios.ch/wp-content/themes/untergrenchenberg/img/Header_Parallax_HausStrichzeichnung_01_C.png");
  z-index: 12;
}
#layer-3 {
  background-image: url("http://www.dev05.fullframestudios.ch/wp-content/themes/untergrenchenberg/img/Header_Parallax_HausStrichzeichnung_01_B.png");
  z-index: 13;
}
#layer-4 {
  background-image: url("http://www.dev05.fullframestudios.ch/wp-content/themes/untergrenchenberg/img/Header_Parallax_HausStrichzeichnung_01_A.png");
  z-index: 15;
}
div#main {
  position: relative;
  top: 0px;
  width: 100%;
  height: 800px;
  z-index: 17;
  -webkit-transform: translate3d(0px, 0px, 0px);
  -moz-transform: translate3d(0px, 0px, 0px);
  -ms-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate3d(0px, 0px, 0px);
  transform: translate3d(0px, 0px, 0px);
  overflow: hidden;
}

/* ****** REGULAR CONTENT ****** */
/*-------------------------------*/
.loremIpsum {
  width: 960px;
  position: relative;
  top: -10px;
  margin: 0 auto;
  padding: 30px 30px 0 30px;
  z-index: 50;
  background-color: #f9f9f9;
  text-align: justify;
}
.spacerTopParallax {
  height: 420px;
  background: #0054a8;
}

加上这个HTML代码：

<div class="spacerTopParallax"></div>
<div id="main">
  <h1 id="UntergrenchenbergLogo">Restaurant Untergrenchenberg</h1>

  <div id="parallax">
    <div class="parallax_layer" id="layer-0"></div>
    <div class="parallax_layer" id="layer-1"></div>
    <div class="parallax_layer" id="layer-2"></div>
    <div class="parallax_layer" id="layer-3"></div>
    <div class="parallax_layer" id="layer-4"></div>
  </div>
</div>

我会永远感激任何暗示为什么这在IE中不起作用。