javascript - 滚动时更改背景附件会导致 WebKit 中的图形故障

Question

我有以下问题。

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

<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)给我出了问题。滚动到底部时，更改工作正常。当向上和向下滚动一点时，背景开始显示图形故障。当页脚回到底部时，它看起来又正常了。

有人可以帮帮我吗？

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

附言。对不起我的英语。