translate3d not performing good enough on parallax effect?

Question

I'm trying to create some parallax effect.

This is how it looks the undesirable result when using 3d translations (notice the flickering of the 1st image)

This is quite noticeable when scrolling in a kinetic trackpad such as the MacBook ones, which do it very smoothly.

In this reduced example I'm just scrolling a background the same amount of pixels than we scroll in order to create a fixed parallax effect. I've done it this way for a better visibility of the issue, the background won't be fixed in the real case, but working in a parallax way.

Reproduction online(For some reason it requires inspecting the iframe and opening it in a new tab to remove the jsfiddle header. It works fluid within the iframe=)

The code has nothing new or extraordinary:

$(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;
    }
});