Как реализовать плавную смену фонового рисунка в firefox?

Question

[Kentavr16]

Пытаюсь реализовать смену фона при скролле. Изначально просто менял значение для bg-image на body при определенных позициях элементов во вьюпорте, но при первом появлении новой фоновой картинки проявлялись фризы. Нашел такое решение

body {
  &::after {
    content: "";
/* при скроле меняю значение переменной --bgImage,отрисовывается новый фон */
    background-image: var(--bgImage);
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
    transition: background-image 0.5s ease 0.2s;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: -5;
  }
}

Все окей в хроме, опере. Но мозила упорно не хочет в транзишн. Картинки просто моментально сменяют друг друга. На стаковерфлоу нашел подобные решения

.test
{
    width: 400px;
    height: 150px;
    position: relative;
    border: 1px solid green;
}

.test:before, .test:after {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 1;
}
.test:before {
    background-color: red;
    z-index: 1;
    transition: opacity 1s;
}

.test:after {
    background-color: green;
}

.test:hover:before {
    opacity: 0;
}

но мне не подходит, так как картинок фона будет много. Кто что может посоветовать?

Comments

[Froggyweb]

перед сменой картинок было бы неплохо их подгрузить, иначе задержки будут в любых браузерах.

[Kentavr16]

Froggyweb, опять-таки, пробовал делать предзагрузку через добавление скрытого img. не увидел разницы.

[Froggyweb]

Kentavr16, https://habr.com/ru/articles/482820/

Answer 1

[Kentavr16]

На момент написания вопроса ответ - никак. Нужно искать свое костыльное решение.