滚动时更改背景附件会导致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);
}

附言。对不起我的英语不好。