Chrome 浏览器的 Skrollr 问题

Question

我正在学习如何使用Skrollr.js library。使用 DOM 中的滚动条来操纵网站外观的超酷工具。它确实有一个陡峭的学习曲线来准确理解它是如何工作的。我正在玩一个简单的示例。我有一个图像，我想在屏幕上保持 500% 的垂直高度。我还有其他要在前台滚动的文本项。我想做一个测试，让其中一个文本项淡化为零。

有用的参考资料：Classic Parallax Scrolling Example 和 I Hate Tomatoes Example

我在 position: fixed; 位置加载了一个 div 中的图像，<div id="skrollr-body"> 下方的滚动区域中有几个 div 我有一个文本标题，我想在使用滚动条时淡化为零.注意：我在没有任何参数的情况下启动了 skrollr.init()。另外，我根本没有使用 jQuery。

我的问题是它在 Chrome 上运行不正常，在 Firefox 浏览器上运行良好。我不知道为什么？

我创建了一个 jsFiddle 来展示这个问题。 http://jsfiddle.net/q3z3v6op/4/ Fiddle 和我的测试程序一样；在 Chrome 上不稳定，在 Firefox 上还可以。在 Chrome 开发工具中查看时，您可以很容易地看到红色框文本不透明度值正确地变为零，因为框向显示顶部移动，但实际显示大部分时间都不会褪色。如果我去 Chrome 开发工具，我可以让它工作，打开抽屉（控制台/搜索/仿真/渲染选项卡所在的位置），然后选择“渲染”并单击 [] 启用连续页面重绘。

还有其他人来过吗？任何想法这个问题发生了什么？非常感谢。

Answer 1

我更新了你的小提琴。这是一种不同的方法，但它应该更兼容跨浏览器。我猜 Chrome 不喜欢 display: block 和 opacity: 0。这看起来像一个错误。我在 Safari（也是 WebKit）上进行了测试，它没有问题。通过使用inline-block，我能够修复 Chrome 上的错误。

http://jsfiddle.net/christianjuth/q3z3v6op/5/

固定代码：

.hsContent {
    display: inline-block;
    position: absolute;
    left: 50%;
    width: 400px;
    margin-left: calc(-200px - 8%);
    color: #ebebeb;
    padding: 0% 8%;
    text-align: center;
}