为什么我的代码仅在 Safari 桌面中运行缓慢？

Question

我正在构建一个使用一些动画/库的网站，AOS、simpleParallax 和 slick 是主要的。 除了 Safari 桌面之外，该网站似乎在任何地方都可以正常运行。 它在 Chrome、Firefox、Microsoft Edge、Opera 中运行良好，在移动设备上的 Safari 中也运行良好，但它在 Safari 桌面上非常缓慢且不稳定。

这是我用于“服务”和“常见问题”页面上的滑块的功能

// 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
                }
            }]
        });
    })();

这是整个网站使用的视差效果

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

这是用于网页主标题上的 AOS 的 css 示例。 AOS 在整个网站中的使用量相当大，但我不会说它的使用量过多。

.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;
} 

我几乎不知道如何解决这个问题，它在移动设备上的 safari 中运行良好似乎真的很奇怪，但在桌面上却完全损坏了。 请记住，这个网站仍在大量开发中，我是一个初学者，但我真的很想在继续之前找到这个问题的解决方案。

如果有人能够指出我可能做错了什么，或者可以解释 Safari 可能与其他浏览器不同的操作方式，我将不胜感激！

这是项目https://secure-hollows-07774.herokuapp.com/

Answer 1

刚刚在 Safari 上尝试过，对我来说似乎很棒。 也许尝试清除浏览器中的 cookie？