title: Intersection Observer don't work with jQuery UI dialog
body: <p>This is related to <a href="https://stackoverflow.com/questions/49389232/intersection-observer-does-not-work-with-target-with-position-fixed">Intersection observer does not work with target with position: fixed</a></p>
  
  <p>but my issue is that interection observer don't fire on element with position: absolute. I have jQuery UI dialog and when it show up observer don't fire.</p>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var self = $('&lt;div/&gt;').appendTo('body').dialog({
      autoOpen: false
  })
  var first = true;
  function visibility_checker(x) {
      if (first) {
          first = false; // ignore initial call
      } else {
          console.log(x);
      }
  }
  setTimeout(function() {
      self.dialog('open');
  }, 4000);
  if (window.IntersectionObserver) {
      var visibility_observer = new IntersectionObserver(visibility_checker, {
          root: document.body
      });
      visibility_observer.observe(self[0]);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-3.4.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Without jQuery UI</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var self = $('&lt;div class="x"/&gt;').hide().appendTo('body');
  var first = true;
  function visibility_checker(x) {
      if (first) {
          first = false; // ignore initial call
      } else {
          console.log(x);
      }
  }
  setTimeout(function() {
      self.show();
  }, 4000);
  if (window.IntersectionObserver) {
      var visibility_observer = new IntersectionObserver(visibility_checker, {
          root: document.body
      });
      visibility_observer.observe(self[0]);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.x {
   width: 100px;
   height: 100px;
   background: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-3.4.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Anyone know what the issue is and why it don't fire?</p>