Why does Safari allow a scroll-based video to work as expected, while other browsers don't?

I am trying to replicate this functionality whereby it is possible to control the video's progression with the mouse scroll. Unusually, the functionality is working flawlessly on Safari yet on Firefox, Opera, and Brave it doesn't work - on Chrome the video update seems to be blocked until the entire scroll event has completed, but it does control the video's position. Thus it gives the impression of being very jagged or laggy (and it's thus possible to scroll right past the video on Chrome without it moving at all). I have the feeling that I'm missing something obvious to do with the requestAnimationFrame or the Intersection Observer. Would some kind soul please have a look and let me know if this is the case, and if so where?

<div id="set-height">
  <video width="100%" height="auto" id="v0">
    <source src="Video.webm" type="video/webm"></source>
    <source src="Video.mp4" type="video/mp4"></source>
  </video>
</div>

<script>

  const playbackConst = 150, // lower the number, quicker the animation
        waveVid = document.querySelector('.index-section--scroll-video'),
        vid = document.getElementById('v0');

  let frameNumber = 0,
      myRequest = window.requestAnimationFrame(scrollPlay); 

  function scrollPlay() {
    frameNumber = ((window.innerHeight * 0.7) - vid.getBoundingClientRect().top) / playbackConst; // position of where the animation starts: 100vh - distance to video
    vid.currentTime = frameNumber;
    window.requestAnimationFrame(scrollPlay); // recursive call is necessary for functionality
  }

  const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (!entry.isIntersecting) {
      window.cancelAnimationFrame(myRequest); // this was needed as Firefox was eating my CPU up on the site
      return;
    } else {
      window.requestAnimationFrame(scrollPlay);
      console.log(vid.getBoundingClientRect().top);
    }
  });

  observer.observe(vid);
});

</script>