IE、Safari、OSXでスクロールが不安定になる

Question

私は基本的な視差アニメーションをしようとしていますが、IEや他のOSXブラウザでテストすると動きが非常にジッタです。

http://willmurdoch.com/scrolltest/

$(window).scroll(function(){ 
    $('.hero').each(function(){ 
    if($(this).offset().top - $(window).scrollTop() > -$(window).height() && $(this).offset().top - $(window).scrollTop() < $(window).height()){ 
     var myTranslate = Math.ceil($(window).scrollTop() - $(this).offset().top); 
     $(this).find('.heroSlides').css('-webkit-transform', 'translateY('+myTranslate/2+'px)'); 
     $(this).find('.scrollWrap').css('-webkit-transform', 'translateY('+myTranslate/5+'px)'); 
    } 
    }); 
}); 

私はすべてのアニメーション要素にハードウェアアクセラレーションを追加する、唯一の火災への間で100ミリ秒ごとと遷移をスクロール機能をロックしようとしましたが、何もそれを行うにはいないようです！どんな助けもありがとう！私のCSS変換に滑らかさを追加し、私が見つけたもの、の

Answer 1

一つは、CSSの変換

https://www.w3schools.com/css/css3_transitions.asp

あなたはskrollrを見ている行うことができますもう一つは、どのようにそのプロジェクトの作品を追加することです。滑らかなスクロールのための数学ベースのイージングを行います。

EDITあなたが投稿ページで

、以下の機能を変更してみてください：

$(window).scroll(function(){ 
    //scrollLogic(); 
    console.log($(window).scrollTop()); 
    closeNav(); 
}); 

var scrollInterval = setInterval(function() { 
    scrollLogic(); 
}, 1000/30); 

その後scrollLogicのmyTranslate一部を変更：へ

$(window).scroll(function(){ 
    scrollLogic(); 
    console.log($(window).scrollTop()); 
    closeNav(); 
}); 

変更。さまざまな値で再生して、変化を徐々に/緩やかにします。