Изменение background-attachment при прокрутке вызывает графические сбои в WebKit

У меня следующая проблема.

Я создал сайт с такой структурой:

<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) вызывает у меня проблемы. При прокрутке вниз изменение работает корректно. При небольшой прокрутке вверх и вниз фон начинает показывать графические сбои. Когда нижний колонтитул возвращается вниз, он снова выглядит нормально.

Кто-нибудь может мне помочь?


javascript google-chrome css background webkit
person Frank Adler    schedule 15.03.2012    source источник
comment
Что такое fix и где вы это объявляете?   -  person meeDamian    schedule 25.04.2012
comment
Нам нужны версии вашего браузера и ОС, в которых вы тестировались, а также характеристики оборудования, поскольку теперь браузеры часто будут использовать оптимизацию графического процессора для обновления дисплея. и JSFiddle помогает :)   -  person tomByrer    schedule 27.04.2012

Ответы (1)


arrow_upward
1
arrow_downward

У меня была похожая проблема на одном сайте. Но я нашел решение.

Попробуйте использовать свойство css -webkit-transform.

См. код ниже

#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. Извините за мой английский.

person Pelmen    schedule 03.05.2012