title: scrollTop with jQuery offset not working properly in Firefox unless mouseout occurs
body: <p>The <code>scrollHash()</code> function below is intended to scroll to a target anchor while adjusting the position to reflect both the fixed menu and desired <code>margin-top</code>.  </p>
  
  <p>The function works properly in Chrome, however it only works in Firefox if a <code>mouseout</code> event occurs before the function is completed (accounting for the function's <code>duration</code> and <code>setTimeout()</code>). Otherwise, if the mouse continues hovering over the link in Firefox throughout the function’s execution, the function fails to complete the second step of adjusting the position (subtracting the fixed menu’s height from <code>offset().top</code>).</p>
  
  <p>It is worth noting that the problem doesn’t present in JSFiddle + Firefox (using the identical code and version of jQuery, 1.9.1), and I'm running Firefox version 69.0.3 (64-bit).  <em>Fiddle available here: <a href="https://jsfiddle.net/chayanyc/otkLa90x/" rel="nofollow noreferrer">https://jsfiddle.net/chayanyc/otkLa90x/</a></em></p>
  
  <p><strong>Code Snippets</strong></p>
  
  <p><em>CSS:</em></p>
  
  <pre><code>body {margin: 0; padding: 0; height: 100%; overflow-x: hidden;}
  * {box-sizing: border-box;}    
  .header_container {height: var(--targetPosition); width: 100vw; margin: 0; padding: 0; position: fixed; top: 0; display: block;}
  .main {margin-top: var(--topWrapper); width: 100%;}
  .Section {padding: var(--sectPadding) 0; width: 100%;}    
  
  @media (max-width: 600px) {
    :root {
      --sectPadding: 5rem;
    }
  }
  
  @media (min-width: 600px) {
    :root {
      --sectPadding: 9.5rem;
      --targetPosition: 9.3rem;
    }
  }
  </code></pre>
  
  <p><em>JavaScript:</em></p>
  
  <pre><code>// SCROLL HASH FUNCTIONS //
  window.onhashchange = scrollHash;
  function scrollHash() {
      menuHeight = document.getElementById('header').offsetHeight;        
      $('.TargetMark').removeClass('TargetMark')
      if (window.location.hash) {            
        $(window.location.hash).addClass('TargetMark')      
          $('html, body').animate({
            scrollTop: $('.TargetMark').offset().top - menuHeight
          }, 100);
      }
  }
  
  // SET MARGIN TOP //
  var headerHeight;
  function setTarget() {
    headerHeight = document.getElementById('header').offsetHeight;
    headerHeight = headerHeight + "px";
    document.documentElement.style.setProperty('--topWrapper', headerHeight);
  }
  
  $(document).ready(function () {
      setTarget();
  });
  
  $(window).resize(function () {
      setTarget();
  });
  </code></pre>
  
  <p><strong>console.log output</strong></p>
  
  <pre><code>// SAME OUTPUT IN CHROME VS. FIREFOX 
  var offset = $('.TargetMark').offset();
  console.log( (offset.top - topHeight) );
  
  // DIFFERING OUTPUT IN CHROME VS. FIREFOX
  var $window = $(window);
  $(window).on('scroll', function () {
      $topOffset = $(this).scrollTop();
      console.log($topOffset);
  });
  </code></pre>