I'm trying to make a gsap animation that switches the viewport's background color depending on your scrolling position. The animation works great on Chrome and on FireFox, but on Safari it just looks bad, very laggy and the colors don't transition into the page, but rather just pop up with a delay.

Here is my animation (I am using 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();
        },
      });
    });
  },

Does anybody have any ideas as to why this is happening on Safari?