Блог

У меня есть этот плагин в качестве анимированного фона http://tympanus.net/codrops/2012/08/02/animated-responsive-image-grid / и структура страницы моего сайта такая же, как в примере 3.

Я установил исправленный фон с z-индексом -100, который не позволяет нижнему колонтитулу сливаться с фоном (поскольку я хочу, чтобы он был сплошным цветом).

По какой-то причине я получаю эту странную проблему с рендерингом, которая возникает только при активном z-index. У меня есть фиксированная панель навигации, которая анимируется черным цветом и сжимается при прокрутке вниз. Когда я прокручиваю, он застревает, когда я прокручиваю вверх, он оставляет отсечение навигационной панели на месте, где она только что была.

У кого-нибудь еще есть опыт работы с этим? И, возможно, некоторое представление о том, почему это происходит? Насколько мне известно, это проблема только с z-индексом в Chrome и opera.

Чем меньше это устанавливает фон на место (и вызов z-index)

 #ri-grid {
    z-index: -100;
    -webkit-transform: translateZ(-100);
    position: fixed;
    top: 0px;
    opacity: 0.3;
}
 

Я попытался исправить это с помощью -webkit-transform: translateZ(-100); который я нашел на сайте с ошибками Chrome, но это не сработало:'(

Любая помощь очень ценится! x

Я решил проблему, хотя я абсолютно не представляю, почему это вызвало эту странную ошибку.

Я просто вложил элемент background в div с классом grid-bg и вместо этого установил для него z-индекс. Не имеет смысла, но это сработало.

 .grid-bg {
    z-index: 100;
    -webkit-transform: translateZ(100);
}

#ri-grid {
    position: fixed;
    top: 0px;
    opacity: 0.3;
}