为什么我的代码仅在Safari桌面上慢? [英] Why is my code slow in safari desktop only?

问题描述

我正在建立一个使用一些动画/库的网站，主要是AOS，simpleParallax和slick.该网站似乎可以正常运行，除了Safari桌面之外.它可以在Chrome，Firefox，Microsoft Edge，Opera上正常运行，也可以在移动设备上的Safari中正常运行，但是在Safari桌面上却非常滞后且不连贯.

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

这是网页主标题上用于AOS的css的示例.AOS在整个网站上都使用了很多，但是我不会说它使用了太多.

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

我对如何解决此问题几乎迷失了，在移动设备上的Safari浏览器中运行正常，但在台式机上完全损坏，这似乎真的很奇怪.请记住，该网站仍处于开发阶段，我是一个初学者，但我真的想在进一步解决此问题之前找到解决方案.

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.

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

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!

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

推荐答案

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

Just tried on Safari and it seems great on my end. Maybe try clearing the cookies in your browser?

这篇关于为什么我的代码仅在Safari桌面上慢?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！