javascript - fullpage.js および scrollmagic で requirejs を使用しているときに、ランダムなサファリがクラッシュする

Question

use-initボイラープレートに基づいて、requirejsで動作するWebサイトを取得しようとしています。ほとんどのシステムとほとんどのブラウザーで問題なく動作します。ただし、ランダムなシステム バージョン (iMac、MBP) およびランダムな Safari バージョン (Safari 6、7、および 8 で発生) の Safari では、('scrollmagic'、'fullpage.js' およびその他のスクリプトと組み合わせて) 失敗します。この場合、ブラウザーはいくつかの要素を表示しただけで、スクロール中に苦労し、時間の経過とともにクラッシュしました。

更新:非圧縮のテスト済みデバイスでは機能しますが、ビルド バージョン (r.js) では機能しません

この動作の理由はわかりませんが、すべての間違いを見つけようとしています。間違った動作が私の知識不足によるものなのか、完全に間違ったことをしたのか、または使用したツールのいずれかにバグがあるのか​​どうかはわかりません。そこでお聞きしたいのですが、何かヒントはありますか?

requirejs でのプラグインの正しい実装についてはわかりません。「scrollmagic」は適切に使用できたと思いますが、「fullpage.js」についてはよくわかりません。「fullpage.js」のモジュールのような使い方を書くことは可能ですか、それとも以下の詳細に従って使用権がありますか? 初めてすべてのものを使用するので、すでにドキュメントを調べました。助けていただければ幸いです。

よろしく
ヤコブ
—<br> http://jakob.grommas.com/bt/
http://jakob.grommas.com/bt-raw/

何か間違ったことをした場合に備えて、ここでは構成、メイン、およびモジュールの詳細なストリップを示します。

config.js :

require.config({
    deps: ['plugins/console', 'main'],
    paths: {
        domReady: '../components/domReady/domReady',
        TweenMax:  '../components/ScrollMagic/js/_dependent/greensock/TweenMax.min',
        TweenLite: '../components/ScrollMagic/js/_dependent/greensock/TweenLite.min',
        TimelineMax: '../components/ScrollMagic/js/_dependent/greensock/TimelineMax.min',
        jquery: '../components/jquery/dist/jquery.min',
        fullPage: '../components/fullpage.js/jquery.fullPage.min',
        scrollMagic: '../components/ScrollMagic/js/jquery.scrollmagic',
        lazySizes: '../components/lazysizes/lazysizes.min',
        viewportUnits: '../components/viewport-units-buggyfill/viewport-units-buggyfill'
    },

    shim: {
        'fullPage': ['jquery'],
        'scrollMagic': ['jquery', 'TweenMax'],
        'TweenMax': {
            deps: ['jquery'],
            exports: 'TweenMax'
        }
    },
    // Prevent caching issues, by adding an additional URL argument
    urlArgs: 'bust=' + (new Date()).getDate()

});

main.js :

require(['lazySizes']);
require(['viewportUnits']);
require(['modules/fullpage']);
require(['domReady', 'modules/scrollmagic.controller', 'modules/scrollmagic.scene'], function(domReady, Controller, Scenes) {
    'use strict';
    domReady(function () {
        Controller.getController().addScene([
            Scenes.getScene00(),
            Scenes.getScene01()
            //...
        ]);
    });
});

modules/fullpage.js :

define([
    //  Dependencies of the module
    'domReady',
    'jquery',
    'fullPage'
], function (domReady, $) {
    //  Strict mode to prevent sloppy JS
    'use strict';
    domReady(function () {
    //  This function is called once the DOM is ready.
    //  It will be safe to query the DOM and manipulate
    //  DOM nodes in this function.
        var indexAll = {},
            getSectionIndex = $('section').length,
            currentSlide;

        $("#viewport").fullpage({
            sectionSelector: 'section',
            slideSelector: 'article',
            menu: '#menu',
            anchors: ['example1', 'example2', 'example3'],
            autoScrolling: false,
            keyboardScrolling: true,
            continuousVertical: true,
            loopHorizontal: true,
            scrollingSpeed: 800,
            verticalCentered: false,
            easing: 'easeInQuart',
            css3: false,
            fixedElements: '.pinContainer',
            slidesNavigation: false,
            afterRender: function(){
                    // do nothing
            },
            afterLoad: function(anchorLink, index){
                currentSlide = indexAll[index];
                if (index === 1) {
                    // do this
                } else {
                    // do that
                }
                if (index > 2 && index < getSectionIndex - 1) {
                    // do this
                    if (index === 3 || index === getSectionIndex - 2) {
                        // do this
                    } else {
                        // do that
                    }
                } else {
                    // do that
                }
                var ignoreThisShit = anchorLink;    // DIRTY HACK
                ignoreThisShit = 'ignoreThisShit';  // DIRTY HACK
            },
            afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
                var currentSlideIndex = slideIndex + 1;
                indexAll[index] = currentSlideIndex;
                if (index > 3 < getSectionIndex - 3) {
                    // do this
                } else {
                    // do that
                }
                var ignoreThisShit = anchorLink;    // DIRTY HACK
                ignoreThisShit = slideAnchor;       // DIRTY HACK
                ignoreThisShit = 'ignoreThisShit';  // DIRTY HACK
            }
        });
    });
});

modules/scrollmagic.controller.js :

define([
    // Dependencies of the module
    'jquery',
    'scrollMagic'
], function ($, ScrollMagic) {
    // Strict mode to prevent sloppy JS
    'use strict';
    // Private variables
    var _controller = new ScrollMagic.Controller();
    // Public API
    return {
        // Getter for private variable
        getController: function () {
            return _controller;
        },
        // File an event on initialisation
        init: function () {
            $(document).trigger(_controller);
        }
    };
});

modules/scrollmagic.scene.js :

define([
    // Dependencies of the module
    'jquery',
    'TweenMax',
    'scrollMagic'
], function ($, TweenMax, ScrollMagic) {
    // Strict mode to prevent sloppy JS
    'use strict';
    // private functions
    var windowHeight  = $(window).innerHeight();
    function getWindowHeight() {
        return windowHeight;
    }
    // Private variables
    var _scene01 = new ScrollMagic.Scene({
        triggerElement: '#section1',
        triggerHook: 0,
        duration: getWindowHeight
    }).setPin($('#pinContent2'));
    var _scene02 = new ScrollMagic.Scene({
        triggerElement: '#section2',
        triggerHook: 1,
        duration: getWindowHeight
    }).setTween(TweenMax.to('#section1', 1, {backgroundColor: '#000'}));
    // Public API
    return {
        // Getter for private variable
        getScene01: function () {
            return _scene01;
        },
        getScene02: function () {
            return _scene02;
        },
        // File an event on initialisation
        init: function () {
            $(document).trigger(_scene01).trigger(_scene02); // is this right?
        }   
    };
});