ScrollMagic setPin in Safari

Question

У меня есть макет, подобный этому fiddle demo. и я должен придерживаться только этого макета.

При нажатии кнопки секция 4 активируется секция .setpin. И страница прыгает и достигает 50%. Он не должен прыгать.

Это происходит только в Сафари.

$('.next2').click(function(){ 
    var s4 = new ScrollMagic.Scene({ 
     triggerElement:'#section4', 
     triggerHook:0, 
     duration:'150%', 
     offset:0 
    }) 
    .setPin('#section4') 
    .addTo(controller); 
}); 

Примечание: Пожалуйста, проверьте скрипку демо в сафари. Потому что он отлично работает в хроме и мозилле.

Answer 1

У меня есть решение.

var s4 = new ScrollMagic.Scene({ 
    triggerElement:'#section4', 
    triggerHook:0, 
    duration:'150%', 
    offset:0 
}) 
.addTo(controller); 

Запишите это вне события события click без setPin(). И сделайте еще один объект scrollMagic внутри события события click.

$('.next2').click(function(){ 
var s4_sub = new ScrollMagic.Scene({ 
    triggerElement:'#section9', 
    triggerHook:0, 
    duration:'100%', 
    offset:0 
}) 
.addTo(controller) 
.on('enter', function(event){ 
    var y=$("body").scrollTop(); 
    s4.setPin('#section4'); 
    $("body").scrollTop(y); 
}); 
}); 

Это окончательное решение.

var y=$("body").scrollTop(); 
$("body").scrollTop(y); 

Это предотвратит движение прокрутки вверх.

Working Fiddle

Answer 2

Попробуйте добавить transform: translate3D(0,0,0); фиксированных дел.