css - Chrome 浏览器的 Skrollr 问题

Question

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

有用的引用资料:Classic Parallax Scrolling Example , 和 I Hate Tomatoes Example

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

我的问题是它在 Chrome 上运行不稳定，但在 Firefox 浏览器上运行良好。我不知所措，不知道为什么？

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

还有人来过吗？知道这个问题是怎么回事吗？非常感谢。

Answer 1

我更新了你的 fiddle 。这是一种不同的方法，但它应该更兼容跨浏览器。我猜 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;
}