Почему анимированное с помощью css изображение некорректно отображается в Мозилле?

Question

[Кристина]

Здравствуйте!
Помогите пожалуйста разобраться.
Анимация по-разному отображается в браузерах: https://codepen.io/KrisIris/pen/Zaogqr
В хроме работает как задумано, только не пойму, почему пламя огня не отображается (оно в блоке container).
В мозилле стойки ракеты появляются слева от ракеты, а при анимации занимают нужное положение.

Answer 1

[Владимир Мирка]

У меня в мозиле работает корректно. Даже дым есть. А в хроме нет. Но летает. И стойки на месте там и там.

Comments

[Kovalsky]

+1, не нашел браузер в котором такая же фигня. Кристина, скажите какую версию используете.

[Кристина]

Никита Полевой,
57.0

Answer 2

[Kovalsky]

<div class="container" style="display: none;">
    <div class="red flame"></div>
    <div class="orange flame"></div>
     <div class="yellow flame"></div>
 </div>

Действительно, почему же огня нет)

По поводу остального: попробуйте явно указать положение для дыма и стоек - top, left, margin, bottom.

Comments

[Кристина]

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

По поводу display: none - в скрипте указано появление этого блока через несколько секунд ))

[Kovalsky]

Кристина, "в скрипте указано появление этого блока через несколько секунд" - у вас в консоль летят ошибки из текста которых будет понятно почему не показывается ваш огонь. Если вы собираетесь называть себя веб-разработчиком, то нельзя игнорировать ошибки о которых вам сообщает главное отладочное ПО на клиенте.

[Кристина]

Никита Полевой, спасибо, поняла! Проблема решилась. Просто Мозилла не отображает две анимации одновременно.

Answer 3

[Кристина]

Мозила не понимает 2 анимации в одной.
Попробуйте обьеденить свойства примерно так:
animation: flicker 3ms ease-in infinite, sky2 3s linear 1;
Либо оберните огонь в еще один div и применяйте 2 анимации на 2 разных обьекта