Проблема с фоном при анимации на jQuery в Webkit — это достаточно распространенная проблема, которую можно решить одним простым правилом CSS.
Суть проблемы в том, что пропадает фон в Chrome, Safari (фон становится белым при анимации).
Проблема возникает из-за сложной архитектуры стилей, которую для упрощения обработки опускает рендер Webkit в динамических ситуациях.
Вот как она выглядит:
Нормальное состояние фона
Есть фон, который в спокойном состоянии рендерится вот так
Фон хаотически пропадает после анимации
А вот так вот фон выглядит после анимации. Где-то белый, где-то не обновился.
Решение проблема в фоном при анимации на jQuery в Webkit
Решений на самом деле 2.
1) Жадный способ, при котором устанавливается таймаут раз в милисекунду, обновляющий фон страницы (приводящий его в прежнее состояние).
Например вот так:
setTimeout("$('element').css(old_css);",1);
где в переменной old_css хранится объект всех CSS данных для фона.
2) Самый удачный способ, на CSS.
-webkit-transform: translateZ(0);
это свойство нужно прописать у контейнера блока, в котором задан фон (это может быть body, div или где у вас лежит фон).
Второй способ точно решает эту проблему. И не занимает много оперативной памяти, как первый.
Также рекомендуем прочитать:
Купите мне кофе