[英]CSS translate3d is very jumpy on Safari 8
我正在研究一個簡單的視差行為,而像Skrollr這樣的庫可能就顯得過大了。 我已經取得了一些非常了不起的進步,並且在Chrome和Firefox中一切正常,但是在OSX Safari 8中運動似乎非常迅速。
如果有人可以提供一些如何使之更平滑的見解,我很想聽聽。 我很驚訝Safari中發生了這種情況,因為我期望它的性能與Chrome類似。
Ive在此處發布了一個僅包含重要部分的演示-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);
就像其他任何東西一樣,它在Safari中確實非常跳動...我建議嘗試以下位置:絕對; 和頂部:* px;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.