IntersectionObserver iOS & Safari

Question

My goal is to change position to a video element if the user scrolls further to the video element. I'm using Intersection Observer API because I need to handle the page scroll from an AdForm Banner/iFrame.

Here is my code:

function createObserver() {
  var observer;
  var options = {
    root: null,
    rootMargin: "0px",
    threshold: buildThresholdList()
  }; 
  observer = new IntersectionObserver(handleIntersect, options); 
  observer.observe(boxElement);
}

Here is the handleIntersect function:

function handleIntersect(entries, observer) { 
  entries.forEach(function(entry) {
    if (entry.intersectionRatio > prevRatio) {
      console.log("VIDEO IN");
      p.style.position = "relative";
    } else if(entry.intersectionRatio === 0 && scrolled === 1 ) {
      console.log("VIDEO OUT");
      p.style.position = "fixed"; 
    }
  });
}

Here is my codepen: https://codepen.io/alex18min/pen/gXXYJb

It works perfectly on Chrome/Firefox/Edge and Android devices, but not on iOS and Safari in general, it seems like the listener is not detected.

Can someone help me? Thank you in advance.

Answer 1

As of iOS 12.2 the Intersection Observer API is natively supported in Safari.

I'm also happy to confirm that it respects the 'actual' visibile viewport - taking toolbars into account at that moment in time.

So as you scroll up and down and the toolbar at the bottom of the page comes into view or hides- that's your new viewport height for calculations.