AlexanderTsymbal
@AlexanderTsymbal
tsymbal.su

Как избавиться от задержки прорисовки параллаксовых блоков в IE (РЕШЕНО!)?

Верстаю параллаксовый one-page сайт dump.tsymbal.su/alp
Суть параллакса заключается в движении альпиниста по дереву. Плюс, фоны в каждом блоке движутся медленнее скролла.
Тестирую сайт в Chrome, Firefox - всё супер.
Тестирую в IE - при прокрутке запаздывают параллаксовые блоки (альпинист, ствол дерева, фоновые картинки). Если открыть страницу в IE (любой версии, я тестирую в 11), прокрутить страницу вниз, а потом начать прокручивать вверх (например, нажав на логотип в шапке). При прокрутке фоновые картинки будут запаздывать, будет "оголяться" фоновый цвет (светло-зеленый). Альпинист тоже "не успевает" за прокруткой. Через какие-то миллисекунды позиции выравниваются и всё встаёт на место. Но вот эта "рябь" при скроллинге очень раздражает.

Параллаксинг у меня классический:
1. Позиция альпиниста меняется свойством "top: Xpx;" и задается высотой прокрутки страницы (если страница прокручена на 300px, и позиция альпиниста = 300px)
2. Позиции фоновых картинок рассчитываются из значения прокрутки, умноженного на коэффициент.
Нагрузки практически никакой. Я даже пробовал убрать всё, кроме альпиниста - у него самый простой скрипт. И даже так страница тормозит. Тестировал в Google Chrome Developers Tools, Timeline почти вся прозрачная - Хром прорисовывает всё мгновенно.

Подскажите, в чём причина и как подружить IE и параллакс? В нэте конкретного ничего не нашел. Все отмахиваются ответами "такой-то плагин вам в помощь..." Такие ответы не принимаются. :) Мне нужно понимать, что не так...

Решение
Спасибо за помощь в решении этого бага asd111 .
Проблема заключается в том, что IE (и в меньшей степени Firefox) плохо рендерят параллакс, когда фон не фиксирован. У любого параллаксового блока анимация должна производиться со свойством background-position и background-attachment должно быть обязательно fixed. После соблюдения этого правила, и произведения изменений в рассчетах положения фоновых картинок ситуация исправилась кардинально. Огромный прирост fps в IE и Firefox. В Chrome ситуация почти не поменялась.
Старый пример (background-attachment: scroll): dump.tsymbal.su/alp2
Новый пример (background-attachment: fixed): dump.tsymbal.su/alp
  • Вопрос задан
  • 3614 просмотров
Решения вопроса 1
@asd111
это баг IE.
В рабочих примерах меняется не top элемента , а background-position фонового изображения. Возможно в этом причина.

вот рабочий пример на jQuery с исходниками.
www.richardshepherd.com/smashing/parallax/backgrou...
https://github.com/richardshepherd/Parallax-Scrolling

Сейчас попробовал заменить вашу parallaxanimation() на свою, которая меняет background-position, результат -background в IE начал отрисовываться нормально без рывков, с альпинистом думаю самостоятельно разберетесь и нужно заменить магическое число speed=12 на что то более разумное

var my_parallaxanimation = function () {
        $(".isvisible .parallax, .isvisible.parallax").each(function () {
            var $self = $(this);
            var speed = 12;
            // Scroll the background at var speed
            // the yPos is a negative value because we're scrolling it UP!
            var yPos = -($(window).scrollTop() / speed);
            // Put together our final background position
            var coords = '50% ' + yPos + 'px';
            // Move the background
            $self.attr("style", "");
            $self.css({ backgroundPosition: coords });
        });
    }
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
viktorvsk
@viktorvsk
охохо. не читал текст и не смотрел сайт. после того, как увидел первую картинку 500 кб и 1900x1000-с-чем-то

Попробуйте вернуться после прочтения
https://developers.google.com/speed/pagespeed/insi...
https://developer.yahoo.com/performance/rules.html
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы