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