ScrollMagic setPin in Safari

Question

I have layout like this fiddle demo. and I have to stick on this layout only.

Onclick of section4 button the section .setpin gets activated. And page jumps and reaches 50% up. It should not Jump.

This is happening only in Safari.

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

Note: Please check fiddle demo in safari. Because it works fine in chrome and mozilla.

Answer 1

I have got a solution.

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

Write this outside the click event event without setPin(). And make another scrollMagic object inside click event event.

$('.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); 
});
});

This is final solution.

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

It will prevent scroll to going up.

Working Fiddle

Answer 2

Try to add transform: translate3D(0,0,0); to fixed div.