Как исправить баг анимации?

Есть у меня флексбокс, внутри которого 2 блока. (В одном форма, а в другом изображение).

<div class="flex-container">
    <div class="form">
            <div class="locationInfo">Главная</div>
            <div class="login">Вход</div>
            <div class="register">Регистрация</div>
    </div>
    <div class="image"></div>
</div>

Есть js Код, который срабатывает после нажатия на кнопку "Готово":

form.style.filter = "blur(3px)"; //Блюрится до получения результатов от сервера

в css для всей формы: transition: 1s; Но когда срабатывает блюр - сначала всё становится черным, а потом блюрится.

Что это такое и как с этим бороться?

p.s Чем больше transition - тем дольше черная картинка. (При 10 сек. transition - примерно 1 сек. черная картинка)