Резкий параллакс в IE7-8

Я представил базовый эффект параллакса на сайте, который я разрабатываю. Он без проблем работает в Chrome, Firefox и IE9; но это действительно рывками в IE7 и IE8. Я просматривал гораздо более сложные сайты и не вижу ничего похожего на то, что я получаю. Я использую только два изображения с текстурой линии сканирования сверху.

Любые идеи, что может быть причиной этого?

#intro {
    background: url(../img/graphics/top-bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-width: 1024px;
    min-height: 768px;
    height: 100%;
    position: relative;
}

#second {
    background: url(../img/graphics/content-bg-2.jpg) center no-repeat fixed;
    position: relative;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-width: 1200px;
    min-height: 768px;
    height: 4800px;
}

Любая помощь приветствуется, спасибо.


javascript html jquery css parallax
person Ollie Barker    schedule 29.07.2012    source источник
comment
Можете ли вы опубликовать код? Имеют ли эти сайты эффект рывков в IE7/8?   -  person Rustam    schedule 29.07.2012
comment
вот плагин параллакса, который я использую. /recreate-nikebetterworld-parallax я добавил css выше   -  person Ollie Barker    schedule 29.07.2012

Ответы (2)


arrow_upward
0
arrow_downward

Пожалуйста, проверьте этот параметр (в комментариях) Как я могу проверить поддержка плавной прокрутки браузера через Javascript? .

Если он отключен - это нормально.

Насколько я понимаю, это http://www.ianlunn.co.uk/demos/recreate-nikebetterworld-parallax/ — это пример, а не ваш код. А если плавная прокрутка отключена - имеет "дерганый" эффект (у меня плавная прокрутка отключена в Chrome, Opera и IE8).

Причина в принципе прокрутки. Если этот параметр отключен, он работает как постоянный +100 пикселей. Если он включен, он работает как 10 раз за 50 мс, каждый раз +10 пикселей.

ОБНОВЛЕНИЕ

Для большей производительности вы можете сделать следующее:

  • Пишите свой код без плагинов

  • Создавайте вызовы событий на основе текущего интервала scrollTop, а не на каждом вызове прокрутки

  • Кэшировать узлы jquery в начале

  • Основной принцип: меньше манипуляций с узлами = больше производительности

Я написал аналогичный эффект на jquery - вы можете увидеть его здесь http://www.thecommoditycode.com/ambersoftware/ и использовать его принципы

person Rustam    schedule 29.07.2012
comment
Я проверил и отключил его, но у меня все еще есть та же проблема. Учитывая, что на большинстве сайтов параллакса нет этой проблемы, я предполагаю, что это мой код. Любые другие идеи, если я пришлю вам промежуточную ссылку, вы сможете взглянуть? - person Ollie Barker; 29.07.2012
comment
Нет, вам нужно включить этот параметр, чтобы не было проблем - person Rustam; 29.07.2012
comment
Извините, если я не был ясен. У меня он был включен, и он все равно дергался - person Ollie Barker; 29.07.2012
comment
Разместите свой код и сравните его с другим сайтом, чтобы узнать, где реальная проблема (полный html + css + js). - person Rustam; 29.07.2012
comment
Хм. У меня дерганый эффект в Firefox. У тебя проблема в производительности. И у IE8 как у самого слабого браузера есть большие проблемы. - person Rustam; 29.07.2012
comment
Любая идея, как я могу это исправить? :/ - person Ollie Barker; 29.07.2012
comment
Я обновил ответ - думаю, единственное, что вы можете сделать, - написать свой собственный код без плагинов. - person Rustam; 29.07.2012
comment
К сожалению, у меня нет знаний, чтобы написать свой собственный код. Спасибо за помощь. - person Ollie Barker; 29.07.2012
comment
В Firefox раньше была и может быть ошибка с фиксированными фоновыми изображениями. Существует возможное исправление, которое я не тестировал: blog .keithclark.co.uk/ - person DBUK; 28.08.2012

arrow_upward
-1
arrow_downward

Я знаю, что немного поздно отвечать на этот вопрос, но это может помочь людям в будущем - проблема в том, что вы используете:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

чтобы сделать изображения за параллаксом полноэкранными, вам нужно использовать другой метод.

Удалите этот код, ваш параллакс будет красивым и гладким.

person 109732057239532    schedule 17.04.2013
comment
Мы не калечим современные браузеры ради IE. IE‹9 не может обрабатывать эти свойства и только игнорирует их. Это не было бы решением. - person Rob; 18.04.2013
comment
На самом деле, Роб, сайты с параллаксом, использующие «обложку», могут работать рывками в самой современной версии Chrome, так что вы ошибаетесь. - person 109732057239532; 18.04.2013
comment
Проблема в IE, а не в Chrome. Здесь проблема только в IE. - person Rob; 18.04.2013
comment
Я только что дважды проверил это, добавив код обратно - «обложка» снова заставила параллакс дергаться - оказалось, что на самом деле он конфликтует с каким-то другим CSS, который давал окну параллакса фиксированную высоту ... кусок скромного пирога пожалуйста. Конфликт был только с Хромом, другого браузера не было. - person 109732057239532; 18.04.2013