IntersectionObserver doesn't work in Safari

Question

Hello everyone I'm using simple intersectionObserver code for sliding content in from bottom by adding class. It works fine in any other browser and on mobiles but Safari. I can't find information what should I change or do to make it work. Any help please

const slideInContents = container.querySelectorAll('.slide-in')

  const showOptions = {
    root:null,
    threshold: 0,
    rootMargin: " 0% 0% -10% 0%"
  };
  const showOnScroll = new IntersectionObserver(function (
      entries, showOnScroll) {
      entries.forEach(entry => {
        if (!entry.isIntersecting) {
          return;
        } else {
          entry.target.classList.add('show');
          showOnScroll.unobserve(entry.target);
        }
      })
    },
    showOptions);
  slideInContents.forEach(slideInContent => {
    showOnScroll.observe(slideInContent)
  })

It's just the example but when I will have all the content ready it will look something like that with small changes maybe. By the way all this content is simply invisible.

<div class="main-wrapper">
      <div class="scroll one">

        <video autoplay playsinline muted loop="true" preload="auto" poster="./images/socialmedia/media-S.jpg">
          <source src="./video/cel2.mp4" type="video/mp4">
        </video>


        <img class="hero slide-in from-bottom" src="./images/6.jpg" loading="lazy" alt="flower">

        <div class="slide-in from-bottom page-text">
          
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
            Corrupti nobis ipsamcupiditate, a dolorem similique quaer 
            non, in cum
            pariatur!
          </p>
        </div>

        <video class="slide-in from-bottom" autoplay muted loop="true" playsinline preload="auto">
        <source src="./video/cel2.mp4" type="video/mp4">
        </video>


        <img class="slide-in from-bottom hero" src="/src/images/7.jpg" loading="lazy" alt="flower">