title: Intersection observer does not work with target with position: fixed
body: <p>I am trying to invoke a callback via intersection observer.  </p>
  
  <p>I want the <code>target</code> to be <code>style: "position: fixed"</code> and move it via
  <code>style.top</code>.  </p>
  
  <p>I also specified the root element which is an ancestor of the target with <code>style: "position: relative"</code>.</p>
  
  <p>But when the target and the observer intersects, the callback function won't be triggered.</p>
  
  <p>Are there some limitations I missed?</p>
  
  <p>Here is what I typed:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;IO&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div style="height: 200px;width: 100%;background: violet" class="upper"&gt;aaa&lt;/div&gt;
  &lt;div style="position:relative;height: 200px;width: 100%;background: blueviolet" id="middle"&gt;bbb
      &lt;div id="target" style="position:fixed;top: 0px;width: 50px;height: 50px;background: firebrick"&gt;ccc&lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
      let options = {
          root: document.getElementById("middle"),
          rootMargin: '0px',
          threshold: 0
      };
      let observer = new IntersectionObserver(entry =&gt; {
          console.log("observer's acting.")
      }, options);
  
      let target = document.getElementById("target");
      observer.observe(target);
  
      let stepping = 0;
  
      let cb = () =&gt; {
          target.style.top = stepping + 'px';
          stepping += 4;
          if (stepping &lt; 300){
              setTimeout(cb, 100);
          }
      };
  
      window.addEventListener("click", () =&gt; {
          cb();
      })
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here is a codepen demo:
  <a href="https://codepen.io/krave/pen/OvpPBm" rel="noreferrer">codepen demo</a></p>
  
  <p>You can click anywhere in the page to start moving the <code>ccc</code> block.</p>