intersectionObserver only fires once

I'm attempting to use the new Intersection Observer API, but I can only get to fire its event just once. I believe I'm using it correctly, as I'm using the MDN example almost verbatim.

https://jsfiddle.net/bukzor/epuwztn0/106/

function startObserver() {
  // Almost verbatim from MDN docs://   https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_APIlet options = {
    root: document.querySelector('#svg'),
    rootMargin: '0px',
    threshold: 0.50,
  }

  let observer = new IntersectionObserver(onIntersection, options);

  let target = document.querySelector('circle');
  observer.observe(target);
}

function onIntersection(entries, observer) {
  // Simply log all intersectiono entries.console.log(observer)
  console.log("intersections:")
  entries.forEach(function(entry) {
    console.log(entry)
    // This code is just a wild guess, but it still won't fire a second time.
    observer.observe(entry.target)
  })
}

When I run it, I get just one entry in the console and never another. The zero-size rectangles it mentions, and the isVisible: false seem like additional symptoms, but I haven't been able to find the cause.

IntersectionObserver {root: svg#svg, rootMargin: "0px 0px 0px 0px", thresholds: Array(1), delay: 0, trackVisibility: false}
intersections:
IntersectionObserverEntry {time: 550.8100000151899, rootBounds: DOMRectReadOnly, boundingClientRect: DOMRectReadOnly, intersectionRect: DOMRectReadOnly, isIntersecting: false, …}
   time: 550.8100000151899rootBounds: DOMRectReadOnly {x: 0, y: 0, width: 0, height: 0, top: 0, …}
   boundingClientRect: DOMRectReadOnly {x: 0, y: 0, width: 0, height: 0, top: 0, …}
   intersectionRect: DOMRectReadOnly {x: 0, y: 0, width: 0, height: 0, top: 0, …}
   isIntersecting: falseintersectionRatio: 0target: circle
   isVisible: false

What's more, I believe the API itself is working fine on my browser, because this demo works fine (below). It's actually quite similar to my example.

http://szager-chromium.github.io/IntersectionObserver/demo/svg/

What am I doing wrong?

1 comment

Answers (1)

AnswerDeveloper

Jan 03

One issue you mentioned is that the observer only fires its event once, and you are not seeing additional entries in the console.

There are a few potential reasons why the observer might not be firing its event more than once.

One possible reason is that the target element is not intersecting with the root element or another element that you are using as the root. In this case, the observer will fire its event once when the target element first becomes intersecting, but it will not fire again until the target element becomes non-intersecting and then intersecting again.

Another possible reason is that you are not properly re-observing the target element after the event fires. In your onIntersection function, you are calling observer.observe(entry.target) for each entry, but this will not cause the observer to continue observing the target element. Instead, you should call observer.unobserve(entry.target) to stop observing the target element, and then call observer.observe(entry.target) again to start observing it again.

It's also possible that there is an issue with the options you are using for the observer. In particular, the threshold option determines at what percentage of the target element's intersection with the root element the observer's callback will be triggered. A value of 0.50 means that the callback will be triggered when the target element is 50% intersecting with the root element. You may want to try adjusting this value to see if it affects the behavior of the observer.