Проблема со scrollIntoView в IntersectionObserver в Mozilla Firefox

Есть баннер по ссылке

Пытаюсь на втором интерактивном кадре настроить смену картинок вкусов по скроллу.

Для этого использую API IntersectionObserver и докрутку scrollIntoView.

В хроме отработает все отрабатывает хорошо. А вот в мозилле его по какой-то причине захватывается сразу два элемента и начинается дергание картинок туда-сюда.

Поможете разобраться в чем причина?

Код в котором происходит реализация задумки

var options = {
    root: document.querySelector(".screen-2__wrappers"),
    rootMargin: "0px",
    threshold: 0.05, //1 значит, что блок полностью должен пропасть из видимости, чтобы стать "неактивным" 0.5 на половину и т д
  };

  // Получаем изображения для отслеживания
  var images = document.querySelectorAll(".screen-2__wrapper");

  // Тут обзервер проихводит наблюдения
  var observer = new IntersectionObserver((entries, observer) => {
    entries.forEach((entry) => {
      if (entry.target.classList.contains("active")) {
        entry.target.classList.remove("active");
      }

      if (entry.isIntersecting) {
        console.log(entry.target.classList);
        // Преобразуем классы активного элемента в строку
        var target = entry.target.classList.value.replace(/ /g, ".");

        setTimeout(function () {
          // Скролимся к активному элементу
          document.querySelector("." + target).scrollIntoView({
            behavior: "smooth",
            block: "start",
          });
        }, 500);

        entry.target.classList.add("active");
      }
    });
  }, options);

  // Подписываемся на наблюдение за каждым из наших изображений
  images.forEach((img) => observer.observe(img));