CSS translate3d 在 Safari 8 上非常跳跃

Question

我正在研究一个简单的视差行为，像Skrollr这样的库只是矫枉过正。我已经取得了一些非常棒的进展，在Chrome和Firefox中运行良好，但是在OSX Safari 8中移动似乎非常跳跃。

如果有人能提供一些关于如何使这件事更顺畅的见解，我很想听听。我很惊讶这发生在Safari中，因为我本来期望与Chrome类似的性能。

我在这里发布了一个演示，其中只有重要部分 - http://playground.philsmartdesign.com.au/work/requestAnimationFrame/

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

在 Safari 中确实非常跳跃，就像其他任何东西一样......我建议尝试立场：绝对;和顶部：*px;