Я работаю над простым кусочком параллаксного поведения, которое библиотеки, такие как Skrollr, просто переполнили бы. Я сделал довольно красивый прогресс, и все отлично работает в Chrome и Firefox, но движение выглядит очень нервным в OSX Safari 8.CSS translate3d очень нервничает на 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:/ –