crossObserver 只触发一次

Question

我正在尝试使用新的 Intersection Observer API，但我只能触发一次它的事件。我相信我使用它是正确的，因为我几乎是逐字逐句地使用MDN 示例。

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)
  })
}

当我运行它时，我在控制台中只有一个条目，而没有其他条目。它提到的零大小矩形，isVisible: false似乎是其他症状，但我一直无法找到原因。

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

更重要的是，我相信 API 本身在我的浏览器上运行良好，因为这个演示运行良好（如下）。它实际上与我的示例非常相似。

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

我究竟做错了什么？