I am currently working on a website that incorporates several animations and libraries, including AOS, simpleParallax, and slick as the main components. The site functions properly across various browsers such as Chrome, Firefox, Microsoft Edge, and Opera. However, I have encountered an issue specifically with Safari desktop where the performance is extremely laggy and choppy.
One of the key functions I utilize for sliders on the 'services' and 'faq' pages is as follows:
// 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
}
}]
});
})();
The parallax effect implemented throughout the website is executed using the following code:
// 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)'
});
});
}
})();
Furthermore, here is an example of the CSS utilized for AOS applied to the main titles of the webpages. AOS is integrated across the website moderately but not excessively:
<!--CSS code for AOS effects-->
I am in need of assistance on resolving this issue as I am unsure why it performs well on mobile Safari but not on desktop. Any insights or explanations into how Safari differs from other browsers would be greatly valued!
For those interested, you can view the project here.