Изменение фонового вложения при прокрутке приводит к графическим сбоям в WebKit - PullRequest
Новая
       6

Изменение фонового вложения при прокрутке приводит к графическим сбоям в WebKit

5 голосов
/ 15 марта 2012

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

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

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

Может ли кто-нибудь мне помочь?

1 Ответ

1 голос
/ 03 мая 2012

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

Попробуйте использовать -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.Извините за мой английский.

...