2014-11-19 3 views
2

Я работаю над простым кусочком параллаксного поведения, которое библиотеки, такие как 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); 
+0

У меня такая же проблема, любое обходное решение? Похоже на очень конкретную проблему только в Safari:/ –

ответ

0

Это очень нервное действительно в Safari как и все остальное ... Я предлагаю старательная позиция: абсолютная; и верх: * px;

+1

Спасибо за предложение - к сожалению, результат более или менее одинаковый. – Phil

Смежные вопросы