Почему мерцает background-image при transform?

Question

[Иван Кулаков]

Ребят, кто подскажет, юзаю в css анимацию с transition scalex, will-change есть, translatez тоже. На другом вообще без анимаций элементе (фон футера) картинка фона мерцает (как будто отключается background-image). К тому же, анимация происходит при ховер на меню, и не на каждом пункте меню при наведении мерцает футер, хотя стили абсолютно у всех пунктов идентичные.

Код:

.animate-rollend-css {
	will-change: transform;
	animation: rollEnd 140ms linear;
}

.animate-slidein-fadein-css {
	will-change: transform, opacity;
	animation: slideIn 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000) both, fadeIn 400ms linear;
}

.animate-fadein-css {
	will-change: opacity;
	animation: fadeIn 600ms linear;
	transform: translateZ(0);
}

@keyframes fadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes slideIn {
	from { transform: translateY(31px) translateZ(0); }
	to   { transform: translateY(0) translateZ(0);    }
}

@keyframes rollEnd {
	from { transform: scaleX(0.6) translateZ(0); }
	to   { transform: scaleX(1) translateZ(0); }
}

/* много другого кода */
footer { background: url('../images/background.jpg') repeat; }

При анимации rollEnd у футера начинает мерцать background-image.
Раньше такого не было, когда вместо transform были просто margin или width.

Comments

[Rustam Bainazarov]

Мы тоже не знаем бед кода.

[Иван Кулаков]

Секунду, сейчас обновлю вопрос.