javascript - 为什么在使用 css 作为背景附件时滚动时背景图像会抖动 :scroll

Question

我正在为两个 div 使用 background-attachment:scroll，滚动效果很好，但唯一的问题是滚动时背景图像抖动。我在下面附上我的 CSS:

.slider_area {
    width:100%;
    height:600px;
    background:#9ad5e3 url(../images/slide_1.jpg) center top no-repeat; 
    background-attachment:scroll;
    -webkit-background-attachment:scroll;
    background-size:cover;
}

.cont_1_wrapper {
    width:100%;
    height:auto;
    padding:100px 0;
    background:url(../images/cont_1_bg_b.jpg) repeat;
    background-attachment:scroll;
}

<script>

    $(window).scroll(function() {
        var scrolledY = $(window).scrollTop();
        $('.scroll').css('background-position', 'center ' + ((scrolledY)) + 'px');
    });

</script>

JSFIDDLE 链接:https://jsfiddle.net/ansarmon/apxrztat/1/

有人可以帮我解决这个问题吗？

Answer 1

尝试添加

transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);

到.slider_area