Проблемы с отображением на Safari?

276
04 марта 2019, 19:00

Есть вот такой сайт click, в хроме всё идеально, но когда загружаешь его с сафари, начинаеться тотальный ужас, фпс 1 в секунду и жестокие лаги. В чем может быть причина такого поведения?

Может что то не так с джсом, почему он так сильно грузит страницу?((((

    $(window).on('load', function () {
    $('.animate_now').hide();  
    $('#loader-wrapper').delay(2500).fadeOut('slow');
});
$(document).ready(function () {
    function autoHeight(){
        var windowHeight = $('#loader-wrapper').height();
        var num = 5.3890608875129;

        if($('#loader-wrapper').height() == 939){
            num = 5.761448349307774;
            console.log(121314555)
        }
        if($('#loader-wrapper').height() == 695){
            num = 7.161151079136691;
            console.log(121314)
        }
        var resizeHeight = Math.ceil(windowHeight * num );
        return resizeHeight;
    }
    function autoScale(){
        var windowHeightAn = $('#loader-wrapper').height();
        var absoluteScale = Math.ceil(windowHeightAn / 0.4037);
        if($(window).height()) 
        return absoluteScale;
    }
    $('body').css({
        'height' : '' + autoHeight() + 'px'
    })
    console.log(1)
    $('.parallax').css({
        'transform' : 'scale(.' + autoScale() + ')'
    })
    console.log(2)

    function castParallax(heightForEl) {
        var opThresh = 350;
        var opFactor = 750;
        window.addEventListener("scroll", function (event) {
            var top = this.pageYOffset;
            var layers = document.getElementsByClassName("parallax");
            var layer, speed, yPos;
            for (var i = 0; i < layers.length; i++) {
                layer = layers[i];
                speed = layer.getAttribute('data-speed');
                var yPos = -(top * speed / 12.4);
                $(layer).css({
                    'position': 'fixed',
                    'top': '0',
                    'left': '0',
                    'background-color': 'white',
                    'height': 'auto',
                    '-webkit-transform': 'scale(.' + heightForEl + ') translate3D( ' + Math.round(yPos) + 'px,0,0)',
                    'transform': 'scale(.' + heightForEl + ') translate3D( ' + Math.round(yPos) + 'px,0,0)',
                    'transform-origin': '0 0',
                    'width': '21653px'
                });
            }
        });
    }
    document.body.onload = castParallax(autoScale());

    $(window).on('load', function animNow(){
        $('.animate_now').delay(3500).show(1000);  
        $('.transition_anim').css({
               'transform': 'translate3D(0,0,0)',
               '-webkit-transform': 'translate3d(0,0,0)',
                'opacity':'1'
        });
        $('.str_1_d_1, .str_1_d_1_t').css({
           'transform': 'translate3D(0,0,0)',
          '-webkit-transform': 'translate3d(0,0,0)',
            'opacity':'1'
        });
        $('.fade_top, .animate').css({
           'transform': 'translate3D(0,0,0)',
            '-webkit-transform': 'translate3d(0,0,0)',
            'opacity':'1'
        });
        $('.fade_top_5_4, .fade_top_5_3, .fade_top_5_2, .fade_top_5_1, .fade_top_5_0, .animate_deL_0,.animate_deL_1,.animate_deL_2,.animate_deL_3,.animate_deL_4,.animate_deL_5').css({
           'transform': 'scale(.25) translate3D(0,0,0)',
            '-webkit-transform': 'scale(.25) translate3d(0,0,0)',
            'opacity':'1'
        });
    });
    $(window).on('scroll', function(){
            var leftPos = $('#pg1Overlay').offset().left;
            var leftOff =  $('.offset_775').offset().left;
            var leftOff_15 = $('.offset_1500').offset().left;
            var leftOff_30 = $('.offset_2500').offset().left;
                if(leftPos < leftOff - 1500){

                    $('.offset_775').css({
                       'transform': 'translate3D(0,0,0)',
                        'opacity':'1'
                    });
                }

                if(leftPos < leftOff_15 - 2500){

                    $('.offset_1500').css({
                       'transform': 'translate3D(0,0,0)',
                        'opacity':'1'
                    });
                }
                if(leftPos < leftOff_30 - 3500){

                    $('.offset_2500').css({
                       'transform': 'translate3D(0,0,0)',
                        'opacity':'1'
                    });
                }

        return false;
    })
});
READ ALSO
CSS Анимация, плавное изменение background-image

CSS Анимация, плавное изменение background-image

Всем доброго вечера, есть анимация:

255
Отложить загрузку &lt;script&gt;

Отложить загрузку <script>

Есть достаточно массивная карта:

242
Ребят нужно помощь по Owl slider

Ребят нужно помощь по Owl slider

Как на всех мобильниках отключить свойство autoplay, пробовал черезtrigger отключать при проверке на разрешение <768px, но всё равно не хочет работать...

236