不正确的视口大小导致动画无法在滚动时执行

Question

注：已解决。查看此 post 的底部以进行修复。

我有一个奇怪的问题，过去几天我一直在努力解决这个问题。值得庆幸的是，我认为我已经将它与 window / 文档高度不正确导致我的滚动动画永远不会出现的问题隔离开来。我正在尝试使用 animate.css 中的 lightSpeedIn 动画来制作 h2 header 中的动画，但 wow.js 只会隐藏元素而不会显示它尽管滚动过去。如果我删除 wow.js 并仅使用 Animate.css ，则 h2 标题的动画效果会很好。

我已经使用以下代码进行了一些调试，我想我知道为什么 wow.js（我也尝试过使用其他滚动库但没有成功）出现故障 - 出于某种原因 jQuery正在报告 window 高度和文档高度均为 943。网站上显然有一个滚动条，所以我很确定我所做的任何滚动实现都不会工作，因为代码从来没有看到任何滚动到.

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

将导致以下内容出现在网站上。

使用 wow.js 实现 - 不起作用

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

在这种情况下，wow.js 似乎将以下样式分配给 header，但它似乎从未被切换。

visibility: hidden; animation-name: none

仅 animate.css 的实现 - 有效

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

最奇怪的是问题只出现在网站的一个部分 - 我的 wow.js 在其他部分工作得很好。对 firebug 的一些挖掘表明动画 "lightSpeedIn" 在存在时并不存在。我什至尝试将网站其他区域（例如旧版标签）的动画名称复制并粘贴到 h2 元素中，但它总是认为动画名称不存在。

我不知道如何解决这个问题。有人对我的问题有任何见解吗？您可以查看此问题的现场演示 here。

更新 1：我认为这可能是 plugin/library 不兼容，所以我删除了除 animate.css 和 wow.js 之外的所有内容 - 没有解决任何问题。我完全被难住了。

更新 2：尝试使用其他滚动库。它们也不起作用。将其缩小为内容 "invisible" 到视口的可能问题。

更新 3：找到解决方案。这非常简单——我的 overflow-x: hidden 在我的 html,body 选择器上。我删除了它，现在 wow.js 脚本可以正常工作。

Answer 1

找到解决方案。这非常简单——我有 overflow-x: hidden 在我的 html,body 选择器上。我删除了它，现在 wow.js 脚本可以正常工作了。

上一个CSS代码

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
}

固定CSS代码

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%;
}

不正确的视口大小导致动画无法在滚动时执行

Incorrect viewport size causing animations to not excute on scroll

javascript

jquery

html

animate.css

wow.js