Непредвиденное мерцание анимации, как решить?

Question

[Макар Герасимов]

Есть блок с тремя элементами, каждый элемент - анимация реализованная через кейфрейм.
Суть анимации: движение облаков и озона ;)

Кейфрейм очень прост, я на протяжении его цикла просто сменяю позицию бэкграунда от -1665px 0 до 0 0.
И проблема заключается в том, что анимация иногда начинает мерцать. И при том что повтор анимации происходит плавно! (поэтому этот вариант сразу откинул)

Видео с проблемой: https://yadi.sk/i/N2txuOGs33aTMg

Ребята пишут мол указывай для элемента backface-visibility hidden. Но не помогает блин!
Дубль проблемы: stackoverflow.com/questions/3461441/prevent-flicke...

Код:

.b-clouds
	z-index 10
	position absolute
	top 0
	bottom 0
	left 0
	right 0
	&__item
		position absolute
		left 0
		right 0
		bottom 0
		z-index 3
		&--offset-1
			top 220px
			background url(../images/clouds.png) repeat-x 0 100%
			animation parallax_cloud 90s linear infinite
			opacity .8
		&--offset-2
			top 250px
			background url(../images/clouds.png) repeat-x 0 100%
			animation parallax_cloud 100s linear infinite reverse
			opacity .7
		&--offset-3
			z-index 1
			height 250px
			bottom 0
			background  url(../images/smoke.png) repeat-x 0 100%
			animation parallax_ozon 40s linear infinite

@keyframes parallax_cloud
	to
		background-position 1665px 0
	from
		background-position 0 0

@keyframes parallax_ozon
	to
		background-position 1634px 0
	from
		background-position 0 0

Answer 1

[devstudent]

у меня облака летали так

.cld {
 background-image:url(../images/clouds.png);
 width:100%;
 height:330px;
 position:fixed;
 background-repeat:repeat-x;
 background-position:0 0;
  animation: city 40s linear infinite;
    -webkit-animation: city 40s linear infinite;
  }
 
   
   @keyframes city {
    from { background-position: -1400px 0;}
    to { background-position:right top;}
   }
    @-webkit-keyframes city {
    from { background-position: -1400px 0;}
    to { background-position: left top;}
   }

не мерцали

Comments

[Макар Герасимов]

Добавил свой код. Логика такая же

[devstudent]

Макар Герасимов: а можно взглянуть как мерцают, и где

[Макар Герасимов]

devstudent: Проблема в том. Что я не знаю как этот рассколбас записать. Он нелогичен, происходит рандомно на блоке где вертятся картинки с облаками

[devstudent]

Макар Герасимов: а ссылка-то есть?

[devstudent]

а кстати , можно попробовать -webkit-transform: translateX();

[Макар Герасимов]

devstudent: Закрытый проект. В общем если смогу решить, опишу тут. Самое интересное что если сократить кол-во блоков, все более менее стабилизируется. Но проблем в этих блоках я не вижу

[devstudent]

Макар Герасимов: ок, будет интересно узнать в чем подвох

[Макар Герасимов]

devstudent: добавил видео, можете посмотреть

[devstudent]

в reverse не может мешать?

[Макар Герасимов]

devstudent: пробовал убирать. Нет ;(

[devstudent]

так и останемся в неведении. надо принять как данность, мерцает и все тут. значит по-другому не может.