GSAP Проблема со свойством opacity в safari

у меня есть анимация плавного исчезновения элементов, по задумке фиолетовый блок должен плавно исчезнуть во время скрола ниже что бы был виден видеоэлемент с position fixed w100% h100% проблем в том, что эта логика отлично работает на хром но не работает вообще на safari, блоки с opacity 0 у safari не исчезают и просто становяться черными как на скриншоте

вот такой код испольхуется для анимаций сейчас

const lenis = new Lenis({
  orientation: "vertical",
  smoothWheel: true
});

document.addEventListener("DOMContentLoaded", () => {
  lenis.on("scroll", () => ScrollTrigger.update());
  const container = document.querySelector('.mainPageVideosSlider');
  const videos = document.querySelectorAll('.background-video');
  const firstVisibleVideo = videos[0]

  if (firstVisibleVideo) {
    firstVisibleVideo.classList.add('background-video-visible')
  }

  let currentVideo = document.querySelector('.background-video-visible');
  const switchVideo = (index) => {
    if (currentVideo) {
      currentVideo.classList.remove('background-video-visible');
      currentVideo.pause();
      currentVideo.currentTime = 0;
    }
    currentVideo = videos[index];
    currentVideo.classList.add('background-video-visible');
    currentVideo.play();

  };

  const animate = (time) => {
    lenis.raf(time);
    requestAnimationFrame(animate);
  };
  requestAnimationFrame(animate);

  const cards = gsap.utils.toArray(".styledCard");
  cards.forEach((card, index) => {
    const cardInner = card.querySelector(".card-inner");
    const text = card.querySelector(".card-text");

    gsap.fromTo(text, {
      opacity: 1,
      willChange: "opacity",
    }, {
      opacity: 0,

      scrollTrigger: {
        trigger: card,
        start: "center center",
        end: "bottom 20%",
        scrub: 0.5,
        toggleActions: "play reverse play reverse"
      }
    });


    ScrollTrigger.create({
      trigger: card,
      start: "top center",
      end: "bottom center",
      onEnter: () => {
        const currentIndex = Array.from(cards).indexOf(card);
        if (currentVideo !== videos[currentIndex]) {
          switchVideo(currentIndex);
        }
      },
      onEnterBack: () => {
        const currentIndex = Array.from(cards).indexOf(card);
        if (currentVideo !== videos[currentIndex]) {
          switchVideo(currentIndex);
        }
      }
    });

    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: card,
        start: "center center",
        end: "bottom top",
        scrub: 0.3,
        markers: false
      }
    });

    tl.to(container, {
      opacity: 0.2,
      ease: "power1.out",
      willChange: "opacity",

    }, 0);

    tl.to(container, {
      opacity: 1,
      willChange: "opacity",

    }, 0.9);

    if (index === 0) {
      gsap.to(".safety-section", {
        opacity: 0,
        willChange: "opacity",

        scrollTrigger: {
          trigger: card,
          start: "-80% center",
          end: "-35% center",
          scrub: true
        }
      });
    }
  });
});