12

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_API
  let 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.8100000151899
   rootBounds: 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: false
   intersectionRatio: 0
   target: 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?

bukzor
  • 37,539
  • 11
  • 77
  • 111
  • Actually, if I move that demo to jsfiddle, it stops working D: https://jsfiddle.net/bukzor/1bm5r7uh/3/ – bukzor Jan 05 '20 at 22:29
  • The code runs just fine but you have not explained yet what you are trying to accomplish. Right now it will observe the `circle` element inside your `#svg` element. If your half your circle is either in or out of the viewport of the SVG it will trigger. Is that what you want? – Emiel Zuurbier Jan 05 '20 at 22:45
  • I think they are asking why it only fires once and not every time the element comes into the viewport. – Alexander Staroselsky Jan 05 '20 at 23:20
  • @EmielZuurbier Is that the behavior you saw? That's different than what I see. I get an intersection event when the page loads and never again, even though the circle object has various levels of intersection with regard to the svg, depending on postion of the mouse. – bukzor Jan 06 '20 at 01:16
  • Does what you want in FF, not in Chrome. – Kaiido Jan 06 '20 at 05:40
  • "When I run it, I get just one entry in the console and never another." This is because the intersection observer only triggers if something enters or leaves a viewport. When you load the page it is either in or out the viewport, hence the first trigger. And the viewport in this case is the `SVG` element. Your `circle` never enters or leaves that viewport during the animation. – Emiel Zuurbier Jan 06 '20 at 08:21
  • 1
    I thought I had the same problem and then realized that it was user error: In e.g. Firefox repeating console logs are not actually shown; instead a counter is display at the first on of these console outputs. One could miss this counter and think that the console has only been logged to once. Feel like a bit of an idiot now. – Marmelador Oct 29 '20 at 11:03

0 Answers0