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

Question

[Александр Цымбал]

Верстаю параллаксовый 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

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

Comments

[Александр Цымбал]

попробую воспользоваться вашим способом. позже отпишусь

[asd111]

Александр Цымбал: вроде я понял где глюк. Для IE нужно background-attachment: fixed иначе рендерит рывками

[asd111]

Александр Цымбал: т.е. необязательно использовать background-position главное чтобы было background-attachment: fixed

[asd111]

Александр Цымбал: извиняюсь что пишу третий коммент, background-position всё таки нужен для функции parallaxanimation() ещё нужно будет в некоторых местах уменьшить коэффициенты и возможно понадобится поставить знак минуса если элемент движется не вверх а вниз. В целом после таких изменений у меня разве что альпинист иногда мерцает при прокручивании в IE но отрисовывается там где должен

[Александр Цымбал]

asd111: я провел этот субботний вечер в поисках решений, сравнивая каждую строку (не только js, но и css) примера, который предложил ты по ссылке и своего примера. И всё-таки нашел решение. Сейчас мой сайт грузится идеально гладко в IE и намного лучше в Firefox. 60fps, не меньше! В Chrome производительность не снизилась, но и не повысилась (хотя, может быть чуть-чуть есть прирост). Хотя подход к параллаксу поменялся кардинально. Причем не только в js, но и в css. Я сейчас подробно опишу решение в начале поста, чтобы это было уроком и остальным верстальщикам. Твою помощь отмечаю как решение. Ссылки помогли очень. Комментарии - не очень, там нужен был другой подход :) Но всё равно очень благодарен тебе!

[Александр Цымбал]

asd111: ааа, я не обратил внимания на твои предыдущие комменты - да. дело в background-attachment: fixed; и перевороте коэффициента параллакса (у меня было 0.97, стало 0.03) и знака вычислений на минус. В общем, тогда не буду писать уже всё подробно. Вот эти 3 правила в основном помогли всё решить. С альпинистом там была немного другая ситуация, нужно было также фиксировать картинку, но нужно было высчитать её положение по горизонтали! Без этого картинка центрируется по центру экрана, не смотря на то, что сам блок занимает не всю зону экрана!
Огромное спасибо! ;) Хоть я и не видел твоих комментов, но они бы навели меня на правильный путь!

Answer 2

[Viktor Vsk]

охохо. не читал текст и не смотрел сайт. после того, как увидел первую картинку 500 кб и 1900x1000-с-чем-то

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

Comments

[Александр Цымбал]

дело не в этом. прочитайте всё-таки пост и мои наблюдения производительности. есть сайты, в которых по 10-12 параллаксовых слоёв с hd png-файлами - и они прорисовываются четко. А у меня всего 1 слой с одной картинкой.
из моего первого поста: "Тестировал в Google Chrome Developers Tools, Timeline почти вся прозрачная - Хром прорисовывает всё мгновенно."