Why is my code slow in safari desktop only?

问题

I'm building a website that uses a few animations/libraries, AOS, simpleParallax and slick are the main ones. The website seems to run okay everywhere except Safari desktop. It runs fine in Chrome, Firefox, Microsoft edge, Opera, and it also runs fine in Safari on mobile, but it's extremely laggy, and choppy on Safari Desktop.

This is the function I use for the sliders on the 'services' and 'faq' pages

// slider
 (function () {
        var work = $('.js-work'),
            sliderWork = work.find('.js-work-slider');

        sliderWork.slick({
            slidesToShow: 3,
            slidesToScroll: 1,
            dots: false,
            arrows: true,
            prevArrow: sliderWork.parents('.js-work').find('.js-prev'),
            nextArrow: sliderWork.parents('.js-work').find('.js-next'),
            speed: 900,
            adaptiveHeight: true,
            autoplay: true,
            autoplaySpeed: 10000,
            responsive: [{
                breakpoint: 1024,
                settings: {
                    slidesToShow: 3
                }
            }, {
                breakpoint: 768,
                settings: {
                    slidesToShow: 3,
                    focusOnSelect: true,
                    vertical: true,
                    verticalSwiping: true
                }
            }]
        });
    })();

This is the parallax effect used throughout the website

// parallax effect
(function () {
    var parallax = $('.js-parallax');
    if (parallax.length) {
        parallax.each(function () {
            var _this = $(this),
                scale = _this.data('scale'),
                orientation = _this.data('orientation');

            new simpleParallax(_this[0], {
                scale: scale,
                orientation: orientation,
                overflow: true,
                delay: .6,
                transition: 'cubic-bezier(0,0,0,1)'
            });
        });
    }
})();

And this is an example of the css used for the AOS on the main title of the webpages. AOS is used quite a bit throughout the website, but I wouldn't say it's used an excessive amount at all.


.main__title[data-aos] p span {
  -webkit-transform: translateY(105%);
  -ms-transform: translateY(105%);
  transform: translateY(105%);
  -webkit-transition: -webkit-transform 0.8s;
  transition: -webkit-transform 0.8s;
  -o-transition: transform 0.8s;
  transition: transform 0.8s;
  transition: transform 0.8s, -webkit-transform 0.8s;
}

.main__title[data-aos].aos-animate p span {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.main__title[data-aos].aos-animate p:first-child span:first-child {
  -webkit-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.main__title[data-aos].aos-animate p:first-child span:nth-child(2) {
  -webkit-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  transition-delay: 0.4s;
}

.main__title[data-aos].aos-animate p:nth-child(2) span:first-child {
  -webkit-transition-delay: 0.6s;
  -o-transition-delay: 0.6s;
  transition-delay: 0.6s;
}

.main__title[data-aos].aos-animate p:nth-child(2) span:nth-child(2) {
  -webkit-transition-delay: 0.8s;
  -o-transition-delay: 0.8s;
  transition-delay: 0.8s;
}

.main__title[data-aos].aos-animate p:nth-child(3) span:first-child {
  -webkit-transition-delay: 1s;
  -o-transition-delay: 1s;
  transition-delay: 1s;
}

I'm pretty much lost on how to fix this, it seems really strange that it runs fine in safari on mobile, but is completely broken on desktop. Please keep in mind this website is still very much a work in progress and that I'm a beginner, but I really want to find the solution to this problem before going any further with it.

If anyone is able to point out what I might be doing wrong, or can explain the ways Safari might operate differently from other browsers, I would really appreciate it!

here is the project https://secure-hollows-07774.herokuapp.com/