В firefox не работает transition opacity?

Question

[Evhar]

В firefox не работает transition opacity
Во всех остальных браузерах корректно отображается , как исправить этот баг

.picture {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    height: 100svh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    opacity: 0;
    transition: 0.6s all;
}
.picture_style_1 {
    background-image: url('../img/main-1.jpg');
    opacity: 1;
}

Comments

[Ivan Ustûžanin]

у меня и в огнелисе opacity вполне себе анимируется
вангую, проблема в неуспевающем обновиться background-image, но это не точно

[Алексей Уколов]

Всё там прекрасно работает. Сделайте пример в песочнице, мы вам скажем, что не так.

[Ankhena]

Я бы перенесла background-image в основной селектор.
И заменила бы all на opacity. Зачем там all, если анимируется только одно конкретное свойство?

[Evhar]

Это на слайдах не работает с этим скриптом, может в нем проблема
т.е происходит смена background-image при переключении слайда
if(picture) {
picture.classList.add(`picture_style_${swiper.realIndex + 1}`); // +1 для того, чтобы не было класса типа .picture_style_0.

/*Обрабатываем событие смены слайда*/
swiper.on('slideChange', function() {
picture.className = 'picture'; //"Сбрасываем" стиль шапки на значение по умолчанию
picture.classList.add(`picture_style_${swiper.realIndex + 1}`); //В зависимости от того, на каком по счёту слайде сейчас находимся, устанавливаем соответствующий стиль шапке
});
}@IvanU7n,

Answer 1

[alexalexes]

Я думаю, с порядком свойств transition лучше не испытывать судьбу, и ставить их в том порядке, как вы видите это в справочнике:
transition: all 0.6s;
По содержанию можно распарсить, какой тип свойства разработчик имел ввиду, но думаю, это не обязывает интерпретатор CSS обладать этим в функционалом. Может вы и словили этот момент в конкретном браузере.