javascript - 滚动背景过渡在 Chrome 和 IE 上产生链式 react

Question

我目前正在构建一个新网站，目前位于 http://weve.wpengine.com/ .作为站点设计的一部分，我实现了一个简单的 backbone.js View ，它以与其余内容不同的速度滚动背景以创建透视错觉。

weve.ScrollTransitionView = Backbone.View.extend({
    templateId: 'template-page-background',
    className: 'page-background',   

    initialize: function () {
        var scope = this;

        var factor = 1.3;

        jQuery(window).scroll(function (e) {
            var scrollTop = jQuery(this).scrollTop();
            var position = 'top ' + (scrollTop / factor) + 'px center';
            scope.$el.css({ 'background-position': position });
        });
    }
});

这在 Firefox 中运行良好。然而，在 Chrome 中，滚动时会产生涟漪效应——背景似乎只在某些地方部分渲染，图像的一些部分被渲染错位——而在 I.E.效果是紧张的。

最初我认为这可能是页面上倾斜元素的问题，但在使用部分透明图像而不是 CSS 倾斜 DOM 元素创建模型后，我遇到了同样的问题。

此外，当页面上只有几个元素时，模型似乎没问题，但当我将其翻译到页面上有更多文本/图像/元素的网站时，呈现问题仍然存在。

我在这个论坛和其他论坛上发现了相关渲染问题的提示，但似乎没有任何提示与我遇到的问题相符。

有人可以帮忙吗？

Answer 1

我最终找到了解决这个问题的方法。这个问题(对我而言)与 Chrome 渲染引擎的工作方式有关(参见:http://www.html5rocks.com/en/tutorials/speed/layers/)。

基本上，我页面的前景被分成一系列包含转换(倾斜)元素的部分。尽管这些部分本身显示为对 Angular 线，但渲染引擎将它们视为在相对 Angular 上具有三 Angular 形透明区域的正方形。当背景移动时，这些部分没有改变——这意味着渲染引擎为了更快、更高效，没有使用新的背景位置正确地重新渲染透明部分，从而产生抖动效果。

解决方案 是在我的视差 javascript 中添加一行，以便在每次背景更改时巧妙地修改每个转换部分的 css。我将脚本设置为在视差代码的每个循环中调整 div 元素的背景，在两种颜色之间交替 - rgba(255, 0, 255, 0) 和 rgba(255, 255, 0, 0) - 它们是不同的理论上但实际上 100% 透明。这迫使浏览器正确地重新渲染并解决了抖动问题。