视口大小不正确，导致动画无法滚动显示

Question

Note: This has been solved. Look at the bottom of this post for the fix.

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 animate.css 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 wow.js and use only Animate.css the h2 title will animate just fine.

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.

  <div id="console">
    $(window).height() = <span id="winheight"></span> <br/>
    $(document).height() = <span id="docheight"></span>
</div>

Will result in the following appearing on the website.

Implementation with wow.js - doesn't work

<h2 class="section-heading text-center wow lightSpeedIn">Sputnik Fact Sheet</h2>

In this case wow.js seems to be assiging the following style to the header, but it never seems to be toggled.

visibility: hidden; animation-name: none

Implementation with only animate.css - works

<h2 class="section-heading text-center animated lightSpeedIn">Sputnik Fact Sheet</h2>

The strangest fact about this is that the problem only occurs on one part of the website - I've got wow.js 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 (eg the legacy tab) into the h2 element but it'll always think the animation name doesn't exist.

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 here .

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.

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.

UPDATE 3: Found the solution . It was super simple - I had overflow-x: hidden on my html,body selector. I removed it and now the wow.js script works correctly.

Answer 1

Found the solution. It was super simple - I had overflow-x: hidden on my html,body selector. I removed it and now the wow.js script works correctly.

Previous CSS Code

html,body {
    height: 100% !important;
    margin: 0;
    background-color: #161519;
    color: #fffafa;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14.5px;
    line-height: 1.42857;
    max-width: 100%;
    overflow-x: hidden
}

Fixed CSS Code

html,body {
    height: 100% !important;
    margin: 0;
    background-color: #161519;
    color: #fffafa;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14.5px;
    line-height: 1.42857;
    max-width: 100%;
}