title: Incorrect viewport size causing animations to not excute on scroll
body: <p><strong>Note:</strong> This has been solved. Look at the bottom of this post for the fix. </p>
  
  <p>I have this bizarre issue that I've pulling my hair out over for the past few days. Thankfully I think I've isolated it to an issue with incorrect window / document heights causing my scroll animations to never appear.  I'm trying to use the lightSpeedIn animation from <em>animate.css</em> to animate a h2 header in, but wow.js will simply hide the element and never reveal it despite scrolling past it. If I remove <em>wow.js</em> and use only <em>Animate.css</em> the h2 title will animate just fine. </p>
  
  <p>I've done some debugging using the following code and I think I know why wow.js (I've also attempted using other scrolling libraries without success) is breaking - for some reason jQuery is reporting both the window height and document height to be 943. There's clearly a scroll bar on the website, so I'm pretty sure any scroll implementation I do won't work because the code never sees anything to scroll to.  </p>
  
  
  
  <pre><code>  &lt;div id="console"&gt;
      $(window).height() = &lt;span id="winheight"&gt;&lt;/span&gt; &lt;br/&gt;
      $(document).height() = &lt;span id="docheight"&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Will result in the following appearing on the website. </p>
  
  <p><a href="https://i.stack.imgur.com/98qP5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/98qP5.png" alt="enter image description here"></a></p>
  
  <p><strong><em>Implementation with wow.js - doesn't work</em></strong></p>
  
  <pre><code>&lt;h2 class="section-heading text-center wow lightSpeedIn"&gt;Sputnik Fact Sheet&lt;/h2&gt;
  </code></pre>
  
  <p>In this case wow.js seems to be assiging the following style to the header, but it never seems to be toggled.</p>
  
  <pre><code>visibility: hidden; animation-name: none
  </code></pre>
  
  <p><strong><em>Implementation with only animate.css - works</em></strong></p>
  
  <pre><code>&lt;h2 class="section-heading text-center animated lightSpeedIn"&gt;Sputnik Fact Sheet&lt;/h2&gt;
  </code></pre>
  
  <p>The strangest fact about this is that the problem only occurs on one part of the website - I've got <em>wow.js</em> working just fine on other parts. Some digging with firebug revealed that animation "lightSpeedIn" doesn't exist when it does. I've even attempted copying and pasting animation names from other areas of the website (e.g. the legacy tab) into the h2 element but it'll always think the animation name doesn't exist.</p>
  
  <p><a href="https://i.stack.imgur.com/eAGyL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eAGyL.png" alt="The wow.js problem - live example from http://bengoodwin.com.au/sputnik/"></a></p>
  
  <p>I'm stumped as to how to go about fixing this. Anyone have any insight into my issue? You can view a live demonstration of this problem <a href="http://bengoodwin.com.au/sputnik/" rel="nofollow noreferrer">here</a>. </p>
  
  <p>UPDATE 1: I thought this might have been a plugin/library incompatibility, so I removed everything but animate.css and wow.js - didn't fix anything. I'm completely stumped. </p>
  
  <p>UPDATE 2: Attempted using other scroll libraries. They don't work either. Narrowed it down to a possible issue with content being "invisible" to the viewport. </p>
  
  <p>UPDATE 3: <strong>Found the solution</strong>. It was super simple - I had <em>overflow-x: hidden</em> on my <em>html,body</em> selector. I removed it and now the wow.js script works correctly. </p>