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.

IntersectionObserver is simply not natively supported on [Safari, iOS Safari, IE11](https://caniuse.com/#feat=intersectionobserver). You'd need to use a polyfill to support this functionality in those browsers. You'd want to load this polyfill prior to any intersection observer functionality. — Alexander Staroselsky, Nov 16 '17 at 19:37
I've already declared the polyfill in the head, like this: this is the first script of the page, but still not working. Am i wrong in the declaration? — alex18min, Nov 17 '17 at 08:37
Tried your [polyfill url](https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver) on my browser that didn't work. Instead you can include [the file](https://github.com/w3c/IntersectionObserver/blob/master/polyfill/intersection-observer.js) manually. — bob, Nov 28 '17 at 21:36
The bigger problem is that the polygoll doesn't adjust for a change in virwport size due to auto hiding toolbars when you scroll. As such items will be about 70 pixels into the bottom of the virwport before they are even detected at 0% — Simon_Weaver, Jun 10 '18 at 20:37

score 2 · Answer 1 · answered Apr 19 '19 at 20:26

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.

IntersectionObserver iOS & Safari

1 Answers1

Linked