jquery - あえぎはサファリで動作しません

Question

なぜこれがサファリでうまくいかないのですか？クロムでうまく機能します。jsスクリプトはFirefoxでも機能しますが、正しい位置に表示されないsvgの問題がいくつかありますが、それは別の問題です...デバッガータブのサファリでこれを取得します:

http://codepen.io/Separator/pen/dGEdeP

以下は、GASPを使用した私のjsコードです

$(document).ready(function ($) {



    // define the main controller for ScrollMagic (note we can have multiple controllers if needed)
    controller = new ScrollMagic.Controller({
        globalSceneOptions: {

            triggerHook: 0
        }
    });



    // animacionet e perseritura pas hyrjes/////////////////////////////

    var tweensaturni = TweenMax.to("#saturni", 100, {rotation: 360, ease: Linear.easeOut, transformOrigin:'50% 50%', repeat:-1,force3D:true})

    var tweenplutoni = TweenMax.to("#plutoni", 30, {rotation: 360, ease: Linear.easeOut, transformOrigin:'50% 50%', repeat:-1,force3D:true})

    var tweenraketa = TweenMax.to("#raketa", 0.05, {y:'+=4',
  repeat:-1, yoyo:true,force3D:true})

    var tweenzjarri = TweenMax.to(".st2", 0.1, {scale:0.8,
  repeat:-1,force3D:true})


    var tweensateliti = TweenMax.to("#sateliti", 20, { rotation:360,
  transformOrigin:'50% 150%', repeat:-1,force3D:true} )
//////////////////////////////////////////////
// start a new ScrollMagic scene by calling the provided method from the ScrollMagic Class
new ScrollMagic.Scene({
    triggerElement: '#komplet',
    duration: '800%'//(duration - window.innerHeight)
})

.setTween(new TimelineMax().add([



    // animacionet e hyrjeve


    TweenMax.staggerTo('#yjet', 5, {autoAlpha: 1, ease: Back.easeOut}, 5),
    TweenMax.staggerTo('#sateliti', 1, {autoAlpha: 1, ease: Back.easeOut, delay:1, y:-100,force3D:true}, 0.15),
    TweenMax.staggerTo('#saturni', 1, {autoAlpha: 1, ease: Back.easeOut, delay:2, y:-100,force3D:true}, 0.15),
    TweenMax.staggerTo('#plutoni', 1, {autoAlpha: 1, ease: Back.easeOut, delay:3, y:-100,force3D:true}, 0.15),
    TweenMax.staggerTo('#raketa', 1, {autoAlpha: 1, ease: Back.easeOut, delay:4, x:-200,force3D:true}, 0.15),
    TweenMax.staggerTo('#text1', 3, {autoAlpha: 1, force3D:true, ease: Back.easeOut, delay:5, y:-50}, 0.15),
    TweenMax.staggerTo('#text2', 3, {autoAlpha: 1, force3D:true, ease: Back.easeOut, delay:5, y:-50}, 0.15)
 ]))

.setPin("#komplet")


.addIndicators({name:'sdklfjsdf'})


.addTo(controller);


    ////////////// SHKRIMI









    function pathPrepare ($el) {
        var lineLength = $el[0].getTotalLength();
        $el.css("stroke-dasharray", lineLength);
        $el.css("stroke-dashoffset", lineLength);
    }

    var $shkrimi = $("path#shkrimi");
    var $vija = $("path#vija");


    // prepare SVG
    pathPrepare($shkrimi);
    pathPrepare($vija);




    var tweenshkrimi = new TimelineMax()
        .add(TweenMax.to($shkrimi, 0.9, {strokeDashoffset: 3450, ease:Linear.easeNone,force3D:true})) 
        .add(TweenMax.to($vija, 0.1, {strokeDashoffset: 0, ease:Linear.easeNone,force3D:true}))  
        //.add(TweenMax.to("#pluto", 1, {stroke: "#fff", ease:Linear.easeNone}), 0);            

    // build scene
    var scene2 = new ScrollMagic.Scene({triggerElement: "#pluto", duration: 5400, tweenChanges: true})
                    .setTween(tweenshkrimi)
                    .setPin("#pluto")
                    .addTo(scene2)
                    .addIndicators({name:"shkrimi"}) 
                    .addTo(controller);



    /////////////////Pjesa2 //////////////////////




     controller2 = new ScrollMagic.Controller({

    });




    var tweensaturni2 = TweenMax.to("#saturni2", 10, {rotation: 360, ease: Linear.easeOut, transformOrigin:'50% 50%', repeat:-1,force3D:true})

    var tweenastronaut1 = TweenMax.to("#astronaut1", 50, {rotation: 360, ease: Linear.easeOut, transformOrigin:'50% 70%', repeat:-1,force3D:true})

    var tweenastronaut2 = TweenMax.to("#astronaut2", 80, {rotation:'360_ccw', ease: Linear.easeOut, transformOrigin:'50% 100%', repeat:-1,force3D:true,})





    new ScrollMagic.Scene({
    triggerElement: '#pjesa2',
    duration: $('#pjesa2').height(),

        triggerHook:'onLeave', offset:300, reverse: true,
})

.setTween(new TimelineMax().add([


    TweenMax.to('body', 1, {backgroundColor: '#41c4b2'}), 

        TweenMax.staggerTo('#saturni2', 0.3, {autoAlpha: 1, ease: Back.easeOut, y:-100, force3D:true,}, 1),
        TweenMax.staggerTo('#astromjegullat', 0.3, {autoAlpha: 1, delay:0.1, ease: Back.easeOut, y:-200, x:-100, scale:'0.8%', force3D:true,}, 1),

        TweenMax.staggerTo('#astronaut1', 0.3, {autoAlpha: 1, delay:0.2, ease: Back.easeOut, y:-100, x:100, scale:'0.8%', force3D:true,}, 1),

        TweenMax.staggerTo('#astronaut2', 0.3, {autoAlpha: 1, delay:0.3, ease: Back.easeOut, y:-150, x:0, scale:'0.8%', force3D:true,}, 1),

    ]))
    .setPin("#pjesa2")

   .addIndicators({name:'pjesa2'})


.addTo(controller2); 




    });