CSS positioning during scroll event unresponsive and jittery on OSX Safari (works in Chrome/Firefox)

Question

I have a sticky border on my website, and during the window's scroll event I update it to follow the window when the user scrolls.

CSS:

.fixed {
    position: relative;
    background: black;
    color: white;
    height: 40px;
}
.container {
    height: 2000px;
}

HTML:

<div class="container">
    <div class="fixed">Fixed</div>
</div>

JS:

$(window).scroll( function() {
    $('.fixed').css({top: $(window).scrollTop()});   
});

Demo: https://jsfiddle.net/xt8c00yq/

I know scroll events are unreliable and unresponsive on mobile browsers, so I have already disabled it for devices. However, it seems to be laggy and jittery on the desktop version of Safari as well. It works fine on both Chrome and Firefox. Test the demo on both browsers to see for yourselves.

Are there any known hacks to make it update smoothly on Safari as well?

(position:fixed is not an option as it needs to flow in response to an unfixed sibling css transition)

Answer 1

Tap into hardware accelerated rendering with translate3d .

$(window).scroll( function() {

    scrolled = $(window).scrollTop();   

    $('.fixed').css({
        '-webkit-transform' : 'translate3d(0,' + scrolled + 'px,0)',
        '-moz-transform'    : 'translate3d(0,' + scrolled + 'px,0)',
        '-ms-transform'     : 'translate3d(0,' + scrolled + 'px,0)',
        '-o-transform'      : 'translate3d(0,' + scrolled + 'px,0)',
        'transform'         : 'translate3d(0,' + scrolled + 'px,0)'
    });

});