滚动时更改背景附件会导致 WebKit 出现图形故障答案

【问题标题】：Changing background-attachment while scrolling causes graphical glitches in WebKit滚动时更改背景附件会导致 WebKit 出现图形故障
【发布时间】：2012-03-15 12:19:53
【问题描述】：

我有以下问题。

我用这种结构建了一个网站：

<section id="content">
...
</section>
<footer>
...
</footer>

内容的背景图像设置为固定在底部。现在，当您向下滚动时，图像会滚动到页脚后面。为了防止这种情况，我编写了一个简短的脚本来自动设置附件在页脚出现时滚动：

$(document).scroll(function () { 
    var curpos = $(window).scrollTop();
    var fooOffset = $('#foot').offset();
    var wh = $(window).height();

    if(curpos >= (fooOffset.top-wh) && fix == 0) {
        $('#content').css('background-attachment','scroll');
        fix = 1;
    } else if(curpos < (fooOffset.top-wh) && fix == 1){
        $('#content').css('background-attachment','fixed');
        fix = 0;
    }
});

这很好地解决了我的问题，几乎适用于所有浏览器。 IE没问题，这次Chrome（一般是WebKit，好像）给我出问题了。滚动到底部时，更改正常工作。当向上和向下滚动一点时，背景开始显示图形故障。当页脚回到底部时，它又看起来正常了。

有人可以帮帮我吗？

【问题讨论】：

什么是fix，你在哪里声明它？
我们需要您测试过的浏览器和操作系统版本，以及硬件规格，因为浏览器现在通常会使用 GPU 优化来进行显示更新。 & 一个 JSFiddle 帮助:)

标签： javascript css google-chrome background webkit

【解决方案1】：

我在一个网站上遇到了类似的问题。但我找到了解决方案。

尝试使用 -webkit-transform css 属性。

见下方代码

#mainBg {
    background:#F1F3F4 url(img/background2.jpg) center top no-repeat scroll;
    width:100%;
}

#mainBg.bottomFixed {
    background:#F1F3F4 url(img/background2.jpg) center bottom no-repeat fixed;
    -webkit-transform: rotate(0deg);
}

PS。对不起我的英语。

【讨论】：