Estoy tratando de hacer una animación gsap que cambie el color de fondo de la ventana gráfica según la posición de desplazamiento. La animación funciona muy bien en Chrome y en FireFox, pero en Safari simplemente se ve mal, muy lenta y los colores no pasan a la página, sino que simplemente aparecen con un retraso.

Aquí está mi animación (estoy usando Vue.js)

 backgroundAnimation() { let $projects = gsap.utils.toArray(this.htmlID + " .project-wrapper"); let projectListTl = gsap.timeline({ scrollTrigger: { trigger: this.htmlID, start: "top center", end: "bottom center", ease: "none", scrub: true, markers: false, onLeave: ({ progress, direction, isActive }) => document.documentElement.style.setProperty("--background", "white"), }, }); $projects.forEach(($project, i) => { projectListTl.to("html", { duration: 0.1, "--background": $project.dataset.projectColor, }); projectListTl.to("html", { delay: 0.3, duration: 0.2, "--background": "transparent", }); }); }, (The method above runs when there is an update on the component) updated: function () { this.$nextTick(function () { this.backgroundAnimation(); const self = this; ScrollTrigger.matchMedia({ "(min-width: 1024px)": function () { self.scrollAnimation(); }, }); }); },

¿Alguien tiene alguna idea de por qué sucede esto en Safari?