滚动背景过渡在 Chrome 和 IE 上产生涟漪效果答案

【问题标题】：Scrolling background transition creates ripple effect on Chrome and IE滚动背景过渡在 Chrome 和 IE 上产生涟漪效果
【发布时间】：2014-04-08 08:49:55
【问题描述】：

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

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 元素创建模型后，我遇到了同样的问题。

此外，当页面上只有几个元素时，模型看起来很好，但是当我将它翻译到页面上有更多文本/图像/元素的站点时，呈现问题仍然存在。

我在这个论坛和其他论坛中找到了有关渲染问题的提示，但似乎没有与我遇到的问题相匹配的提示。

有人可以帮忙吗？

【问题讨论】：

我最近也看到了这个问题。这很奇怪，因为它适用于具有这种效果的第一个 div，但是对于随后的 div，图像会被撕裂，有些 div 甚至不显示它。我也看到它在 FF 和 Safari 中运行良好，但 Chrome 似乎有问题（无法验证 IE）
嗨 Fishbowl，我花了一段时间，但我最终找到了解决方案 - 我在下面发布了答案 - 希望对您有所帮助。

标签： javascript css google-chrome backbone.js

【解决方案1】：

我最终找到了解决方案。这个问题（对我来说）与 Chrome 渲染引擎的工作方式有关（参见：http://www.html5rocks.com/en/tutorials/speed/layers/）。

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

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

【讨论】：