title: IntersectionObserver API erratic in Safari
body: <p>I have an IntersectionObserver API which checks the visibility of the blocks to change the header and menu items classes, it Works perfectly in Chrome, but it is very erratic in Safari (v. 13.0.5). I also inserted the polyfill, but doesn't help. 
  This is the code I use</p>
  
  <pre><code>/* Intersection observer */
  let sections = document.querySelectorAll(".homesection");
  
  let options = {
      root: null,
      rootMargin: '100px 0px 0px 0px',
      threshold: 0.7
  };
  
  let observer = new IntersectionObserver(function(entries,observer){
      entries.forEach(entry =&gt; {
          let thisID = entry.target.getAttribute('id');
          $('nav .top-menu li a.selected').removeClass("selected");
          $('body.loaded nav .top-menu li a[href=#'+thisID+']').addClass("selected");
  
          if ( $("body").hasClass("loaded") ) {
              if ( thisID == "home" || thisID == "top" ) {
                  $('body').removeClass("scrolled");
                  $("body").addClass("topscroll");
              } else {
                  $('body').addClass("scrolled");
                  $("body").removeClass("topscroll");
              }           
          }
  
  
      });
  }, options);
  
  sections.forEach(section =&gt; {
      observer.observe(section);
  });
  </code></pre>
  
  <p>The issue is mostly visible when loading the page the first time, it doesn't trigger the script and is very erratic on observing the elements, but on second load or click to some internal js action it works more-less fine.
  Any idea what could be the problem? </p>