Parallax JS не работает гладко с контентом в Firefox, IE и Safari

Question

Я использую Parallax JS ( http://pixelcog.github.io/parallax.js/) на моем новом веб-сайте. В пяти местах я использую это и без какого-либо контента только с изображениями параллакса, он работает очень хорошо во всех браузерах.

Но с содержимым параллакс не работает гладко в браузерах Firefox, IE и Safari. Похоже, дергает и изображение параллакса, и его содержимое div. Содержимое параллакс-дива движется первым, а затем параллакс-изображение движется.

Вот мой фрагмент кода настройки параллакса.

<section class="my-class parallax-window" data-parallax="scroll" data-image-src="img/my-image.jpg">
   <!-- my content going here... -->
</section>

.parallax-window { min-height: 400px; background: transparent; }

Как я могу сделать это гладко для всех браузеров..?

Answer 1

// To fix parallax jerky effects on IE Browsers  
    if (navigator.userAgent.match(/Trident\/7\./)) {  
        $('body').on("mousewheel", function () {  
            event.preventDefault();  
            var wd = event.wheelDelta;  
            var csp = window.pageYOffset;  
            window.scrollTo(0, csp - wd);  
        });  
    } 

Answer 2

Посмотрите на раздел на странице github, озаглавленный "Использование внутреннего HTML для сложного контента". Это может помочь. У меня была проблема мерцания верхнего и нижнего краев из-за небольшого фона на свитке, который я исправил с помощью опции "кровотечение", позволяющей немного перекрывать верхний нижний слой, чтобы скрыть глюки. Существует также экспериментальная опция, называемая "overScrollFix", которую можно установить на "ИСТИНА", что может помочь в некоторых браузерах.