Question

我目前正在开发一个新网站，目前位于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元素创建模型后，我遇到了同样的问题。

此外，当页面上只有少数元素时，模型似乎很好，但是当我将其翻译到页面上有更多文本/图像/元素的网站时，渲染问题仍然存在。

我已经在此论坛和其他论坛中找到了相关渲染问题的提示，但似乎与我遇到的问题无关。

有人可以帮忙吗？

Answer 1

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

基本上，我的页面的前景被分成一系列包含变换（倾斜）元素的部分。即使这些部分本身显示为对角线，渲染引擎也将它们视为在相对角上具有三角形透明区域的正方形。当背景移动时，这些部分不会被更改 - 这意味着渲染引擎为了更快，更高效，不能使用新的背景位置正确地重新渲染透明部分，从而创建抖动效应。

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

滚动背景转换会在Chrome和IE上产生连锁反应

1 个答案: