translate3d对视差效果表现不佳？

Question

我正在尝试创建一些视差效果。

这是使用3d翻译时看起来不受欢迎的结果（注意第一张图像的闪烁）

当在动态触控板（例如MacBook）中滚动时，这非常明显，这非常顺利。

在这个简化示例中，我只是滚动背景与我们滚动相同数量的像素，以便创建固定的视差效果。我这样做是为了更好地了解问题，背景不会在实际案例中修复，而是以视差方式工作。

Reproduction online（由于某种原因，它需要检查iframe并在新标签中打开它以删除jsfiddle标头。它在iframe中工作流程=）

代码没有什么新的或特别的：

$(document).ready(function() {

     //polify
    (function() {
        var requestAnimationFrame = window.requestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.msRequestAnimationFrame;
        window.requestAnimationFrame = requestAnimationFrame;
    })();

    $(window).on('scroll', scrollHandler);

    var ticking = false;
    function scrollHandler(){
        if(!ticking){
            requestAnimationFrame(update);
            ticking = true;
        }
    }
    var test = $('.section').first().find('.bg');

    function update(){
        test.css({
            'transform': 'translate3d(0px, '+ $(window).scrollTop() + 'px, 0px)'
        })
        ticking = false;
    }
});