Javascript 通过jQuery定位时，chrome中的背景图像会抖动

我写了一个简单的paralax脚本

当我在Chrome和Internet Explorer中使用鼠标滚轮滚动时，背景图像在重新定位时会抖动。。。在Firefox中，它总是完全平滑地滚动（正如预期的那样）。浏览器中是否存在与性能相关的问题？我可以做些什么来防止这种情况（我可以如何改进脚本）

在线示例：

CSS:

HTML:

<div class="smplParalax content" id="footerSectionOne">
    <div class="inner">
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
      </div>
  </div>
  <div class="smplParalax content" id="footerSectionTwo">
    <div class="inner">
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
      </div>
  </div>

---

使用

背景附件：fixed

来创建实际的视差效果，您可以查看下面的演示，但您需要根据需要修复CSS。但是，正如您所看到的，滚动是平滑的

函数initParalx（选项）{
如果（选项类型==“未定义”）{
变量选项={
“类”：“smplParalax”，
问：2
}
}
功能_handleParalax（选项）{
var-relPos=0；
$（“.smplParalax”）.each（函数（）{
relPos=$（窗口）.scrollTop（）-$（此）.offset（）.top；
$（this.css（“背景位置”，“0”+（relPos/options.q）+“px”）；
});
}
$（窗口）。打开（“加载滚动调整大小”，函数（）{
_handleParalax（可选）；
});
}
$（窗口）.ready（函数（）{
initParalx({
q:1.5
});
});
正文{
字体：100%/1.5 arial；
填充：0；
保证金：0；
颜色：#fff；
身高：100%；
}
.smplParalax{
身高：100%；
位置：相对位置；
背景附件：固定；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
}
.内容{
边框底部：实心1px#f00；
}
.内容.内部{
填充：20px；
}
#页脚第一节{
背景图片：url(http://lab.dev-nook.de/_test/paralax/paralax/1.jpg);
}
#第二节{
背景图片：url(http://lab.dev-nook.de/_test/paralax/paralax/2.jpg);
}

乱数假文
乱数假文
乱数假文
乱数假文
乱数假文
乱数假文
乱数假文
乱数假文
乱数假文
乱数假文
乱数假文
乱数假文
乱数假文
乱数假文
乱数假文
乱数假文
乱数假文
乱数假文
乱数假文
乱数假文
好的，附件：修复了打乱了paralax，但它阻止了抽搐。我会想出一个办法来解决这个问题。非常感谢。
<div class="smplParalax content" id="footerSectionOne">
    <div class="inner">
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
      </div>
  </div>
  <div class="smplParalax content" id="footerSectionTwo">
    <div class="inner">
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
      </div>
  </div>

function initParalx(options) {
    if(typeof options == "undefined"){
        var options = {
            'class': 'smplParalax',
            'q': 2
        }
    }

    function _handleParalax(options){
        var relPos = 0;
        $(".smplParalax").each(function() {
            relPos = $(window).scrollTop() - $(this).offset().top;
            $(this).css("background-position", "0 " + (relPos / options.q) + "px");
        });
    }

    $(window).on("load scroll resize", function() {
        _handleParalax(options);
    });
}

$(window).ready(function() {
    initParalx({
        'q': 1.5
    });
});