CSS translate3d is very jumpy on Safari 8

Question

I'm working on a simple piece of parallax behaviour that libraries such as Skrollr would just be overkill for. I've made some pretty awesome progress and things are working beautifully in Chrome and Firefox, but movement appears very jumpy in OSX Safari 8.

If anyone can offer some insight into how to make this a whole lot smoother, I'd love to hear it. I'm quite surprised this is happening in Safari, as I would have expected similar performance to Chrome.

Ive posted a demo with just the important parts here - http://playground.philsmartdesign.com.au/work/requestAnimationFrame/

The Javascript:

(function (window, document, $, undefined) {
    "use strict";

    var $window = $(window),
        $document = $(document);

    $document.ready(function () {

        var $image = $('#move-me');

        // Method 1 : Using requestAnimationFrame - very jumpy in Safari 8
        function raf_handler(timestamp) {
            move_image();
            window.requestAnimationFrame(raf_handler);
        }
        window.requestAnimationFrame(raf_handler);

        // Method 2 : Binding to scroll event - a little bit smoother, but still jumpy in Safari 8
        //$window.on('scroll', move_image);

        function move_image(){
            var transform = 'translate3d(0px,' + ($window.scrollTop() * 1.3) + 'px, 0px)'; // 3d transform
            //var transform = 'translate(0px,' + ($window.scrollTop() * 1.3) + 'px)'; // 2d transform
            $image[0].style.webkitTransform = transform;
            $image[0].style.MozTransform = transform;
            $image[0].style.msTransform = transform;
            $image[0].style.OTransform = transform;
            $image[0].style.transform = transform;
        }

    });

})(window, document, jQuery);

Answer 1

It's very jumpy indeed in Safari just like anything else... I'd suggest trying position: absolute; and top: *px;