Parallax.js跨浏览器问题

Question

我是视差效果的新手，我正在使用parallax.js来处理新的设计。

这里的实例：

http://codepen.io/simonmoon/pen/f45f0d4ee0024d268d0b5ce5f4107a5d

我遇到的问题是，当全屏观看时，不同的浏览器以完全不同的方式显示场景。它在chrome上按预期工作，但在firefox上，图像更大，定位不同，并且正文没有隐藏溢出 - 允许您滚动页面，这是非意图。在IE中，图像较大，3星图层不移动。我已经对谷歌做过一些研究，但无法找到任何相关的解决方案，而且老实说我不确定是什么原因导致这些差异。任何帮助将不胜感激。

为了完成，这里是html（jade）

ul#scene
  li.layer(data-depth="0.00")
  li.layer(data-depth="0.10")
    div.starsbg
  li.layer(data-depth="0.40")
    div.starsmg
  li.layer(data-depth="0.60")
    div.starsfg
  li.layer(data-depth="1.40")
    div.chartouter
  li.layer(data-depth="1.50")
    div.chartinner     
  li.layer(data-depth="1.80")
    div.palmistry 
  p.title.
    Salt Of The Moon
  div.texthalo
  li.layer(data-depth="14.20")

css（手写笔）

@import url(http://fonts.googleapis.com/css?family=Nunito)

background-size()
  -webkit-background-size arguments
  -moz-background-size arguments
  -o-background-size arguments
  background-size arguments

box-shadow()
  -webkit-box-shadow arguments
  -moz-box-shadow arguments
  box-shadow arguments

body
  padding 0
  margin 0
  height 0px
  width 100%
  background url('http://i60.tinypic.com/5ofqs5.jpg') no-repeat center center fixed
  background-size(cover)
  overflow hidden
  -moz-overflow hidden
  font-family 'Nunito' sans-serif

.textcontain
  absolute top 350px
  text-align center
  width 100%

#scene
  absolute top 0 left 0
  width 100%
  height 1400px
  margin auto

li.layer
  width 100%
  height 100%
  list-style-type none

.chartouter
  background url('http://i60.tinypic.com/21llf09.png') no-repeat top center
  position absolute
  top 50% 
  left 50%
  width 880px
  height 880px
  margin-top -440px
  margin-left -440px

.chartinner
  background url('http://i59.tinypic.com/1z4e5cj.png') no-repeat center
  width 400px
  height 400px
  absolute top 458px left 50%
  margin-left -200px


.palmistry
  background url('http://i57.tinypic.com/2i0vrye.png') no-repeat top center
  width 600px
  height 500px
  absolute top 414px left 50%
  margin-left -315px

.texthalo
  box-shadow(0px 0px 28px 0px rgba(255, 255, 255, 1))
  absolute top -200px left -5px
  border-radius 50%
  width 40px
  height 300px

.starsbg
  background url('http://i60.tinypic.com/abi9o1.png') center center fixed
  background-size(cover)
  width 100%
  height 100%

.starsmg
  background url('http://i61.tinypic.com/2z4wylh.png') left center fixed
  background-size(cover)
  width 100%
  height 100%

.starsfg
  background url('http://i58.tinypic.com/280jybr.png') center center fixed
  background-size(cover)
  width 100%
  height 100%

.title
  width 10%
  margin-left auto
  margin-right auto
  text-align center
  absolute top -150px
  font-size 3.2em
  -webkit-font-smoothing antialiased
  text-shadow rgba(255,255,255,.8) 0px 0px 20px
  color white
  letter-spacing 8px

和javascript（注意：parrallax.js正在上面的链接中由codepen加载，额外的代码是我发现的here的假设firefox parrallax渲染修复。

var scene = document.getElementById('scene');
var parallax = new Parallax(scene);

(function(doc) {

  var root = doc.documentElement;

  // Not ideal, but better than UA sniffing.
  if ("MozAppearance" in root.style) {

    // determine the vertical scrollbar width
    var scrollbarWidth = root.clientWidth;
    root.style.overflow = "scroll";
    scrollbarWidth -= root.clientWidth;
    root.style.overflow = "";

    // create a synthetic scroll event
    var scrollEvent = doc.createEvent("UIEvent")
    scrollEvent.initEvent("scroll", true, true);

    // event dispatcher
    function scrollHandler() {
      doc.dispatchEvent(scrollEvent)
    }

    // detect mouse events in the document scrollbar track
    doc.addEventListener("mousedown", function(e) {
      if (e.clientX > root.clientWidth - scrollbarWidth) {
        doc.addEventListener("mousemove", scrollHandler, false);
        doc.addEventListener("mouseup", function() {
          doc.removeEventListener("mouseup", arguments.callee, false);
          doc.removeEventListener("mousemove", scrollHandler, false);
        }, false)
      }
    }, false)

    // override mouse wheel behaviour.
    doc.addEventListener("DOMMouseScroll", function(e) {
      // Don't disable hot key behaviours
      if (!e.ctrlKey && !e.shiftKey) {
        root.scrollTop += e.detail * 16;
        scrollHandler.call(this, e);
        e.preventDefault()
      }
    }, false)

  }
})(document);