Chrome 浏览器的 Skrollr 问题

Question

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

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

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

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

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

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

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

Chrome 浏览器的 Skrollr 问题

Skrollr Troubles With Chrome Browser

css

google-chrome

skrollr