title: IntersectionObserver Multiple Entries
body: <p>Can anyone explain to me why an observer set up to observe a single element would return multiple IntersectionObserverEntry's? I've noticed this in my Vue project, but it isn't consistent and it seems to only occur in recent versions of Chrome.</p>
  
  <p>I wish I could provide a fiddle replicating the issue, but I can't seem to replicate it must be something related to my project. Just wondering if anyone can point me in the right direction as to why this could be happening.</p>
  
  <p>Here's my jsfiddle (even though it doesn't display this behaviour)</p>
  
  <pre><code>&lt;div id="app"&gt; 
    &lt;img :alt="x" v-for="x in 20" v-lazy="'https://picsum.photos/400/600/?random'"/&gt;
  &lt;/div&gt;
  
  function isObject (value) {
    return value &amp;&amp; typeof value === 'object' &amp;&amp; value.constructor === Object;
  }
  
  function init (el, binding) {
    let options = {
      threshold: 0.10
    }    
  
    let observer = new IntersectionObserver((entries) =&gt; {
      console.log(el, entries)
      if (entries[0].isIntersecting || entries[0].intersectionRatio &gt; 0) {
        // console.log('is intersecting', el)
        // Create a new Image object
        let img = new Image();
  
        // Incase we want to add a css effect
        el.classList.add('js-lazy', 'js-lazy--loading');
  
        // Setup an onload event for the image
        img.onload = () =&gt; {
          if (el.nodeName.toLowerCase() === 'img') {
            // Use img src
            el.setAttribute('src', img.src);
          } else {
            // Use background image style
            el.style.backgroundImage = `url('${ img.src }')`;
          }
  
          // Add a loaded class which we can use to remove the css effect
          el.classList.remove('js-lazy--loading');
        }
  
        // Set the image src to trigger the image to load
        if (isObject(binding.value)) {
          img.src = window.matchMedia('(max-width: 767px)').matches ? binding.value.mobile : binding.value.desktop;
        } else {
          img.src = binding.value;
        }
  
        // Remove the observer as the element is now within view
        observer.unobserve(el);
        observer = null;
      }
    }, options);
  
    // Start the observer
    observer.observe(el);
  }
  
  Vue.directive('lazy', {
    bind: function (el, binding) {
      // If binding has a value when the directive binds to the element
      // then we can run init()
      if (binding.value.length &gt; 0 || isObject(binding.value)) {
        // console.log('init on bind', el);
        init(el, binding);
      }
    },
  
    update: function (el, binding) {
      // If binding didn't have a value when the directive was initially bound to the element
      // then run init() when the old and current values do not match
      if (typeof binding.value === 'object') {
        if (binding.value.desktop === binding.oldValue.desktop) { 
          return;
        }
      } else if (binding.value === binding.oldValue) {
        return;
      }
  
      // console.log('init on update', el);
      init(el, binding);
    }
  });
  
  new Vue({
    el: "#app"
  })
  </code></pre>