Tilda Zero-блоки: экран становится черным при переключении вкладок с абсолютным позиционированием и .outVis

Я создаю кастомный таб-скрипт на Tilda Zero-блоках, где каждая вкладка — отдельный #rec блок. Я использую position: absolute для всех блоков (обязательное требование Tilda) и классы .outVis/.outInd для скрытия неактивных вкладок, а активный таб получает .active.

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

Что я сделал:

1. Все Zero-блоки объединены в контейнер .maintabsection.
2. Неактивные блоки скрываются через .outVis {opacity:0} и .outInd {z-index:-1}.
3. Активный блок получает .active и z-index:2.
4. Контейнер подстраивает высоту под активный таб.

Проблема

Даже с присвоением .active и корректным z-index, при переключении вкладок на мобильных устройствах блок может временно пропадать, показывая черный экран. Вероятная причина: верхний блок с opacity:0, нижний с z-index:-1 → контейнер временно не содержит видимого элемента.

Вопрос

Как правильно управлять видимостью вкладок на Tilda с обязательным position: absolute, чтобы:

1. сохранялась анимация переключения;
2. активная вкладка всегда была видимой;
3. черный экран полностью исчезал на мобильных;
4. можно было использовать существующие классы .outVis, .outInd, .active.

document.addEventListener("DOMContentLoaded", function() {

  function onTildaReady(callback) {
    if (typeof $ !== "undefined" && $(".t-rec").length > 0) {
      callback();
    } else {
      setTimeout(function() {
        onTildaReady(callback);
      }, 200);
    }
  }

  onTildaReady(function() {

    let timestep = 500;

    // Список rec-ID вкладок
    let sbZero = [
      [
        '#rec1155640926',
        '#rec1155782621',
        '#rec1155782796',
        '#rec1155783046',
        '#rec1155783941',
        '#rec1155783986',
        '#rec1155784001'
      ]
    ];

    // Объединяем блоки в контейнер
    sbZero.forEach(function(group) {
      let $elems = $(group.join(","));
      if ($elems.length === 0) return;
      $elems.wrapAll('<div class="maintabsection"></div>');
    });

    const $container = $(".maintabsection");

    // Инициализация: первый таб активен
    $container.find(".t-rec").first().addClass("active");

    // Находим все кнопки
    const $buttons = $container.find(".tab_btn");

    // Функция переключения вкладки
    function changeTab($em, index) {
      const $items = $em.find(".t-rec");
      const $target = $items.eq(index);

      // Нормализация
      if ($items.length === 0) return;
      if (index < 0) index = 0;
      if (index >= $items.length) index = $items.length - 1;

      // Скрываем все и показываем только активный
      $items.removeClass("active outInd").addClass("outVis");
      $target.removeClass("outVis").addClass("active");

      // Обновляем кнопки
      $em.find(".tab_btn").removeClass("actbtnZ");
      $target.find(".tab_btn").first().addClass("actbtnZ");

      // Блокируем управление на время анимации
      $em.find(".tab_btn").addClass("stoptab").css("cursor", "default");

      // Устанавливаем высоту контейнера под активный таб
      setTimeout(function() {
        $em.height($target.outerHeight(true));
        $items.removeClass("timestep");
        $em.find(".tab_btn").removeClass("stoptab").css("cursor", "pointer");
      }, timestep);
    }

    // Клик по кнопке
    $(document).on("click", ".tab_btn", function() {
      const $cur = $(this).closest(".maintabsection");
      const idx = $(this).closest(".t-rec").find(".tab_btn").index(this);
      changeTab($cur, idx);
    });

    // Подстраиваем высоту при ресайзе
    $(window).on("resize", function() {
      clearTimeout(window.__tabFix__);
      window.__tabFix__ = setTimeout(function() {
        $container.each(function() {
          const $active = $(this).find(".t-rec.active");
          $(this).height($active.outerHeight(true));
        });
      }, 300);
    });

    // Изначальная установка высоты
    $container.each(function() {
      const $active = $(this).find(".t-rec.active");
      $(this).height($active.outerHeight(true));
    });

  });
});

.t-rec.posAnsld {
  position: absolute;
  width: 100%;
  top: 0;
}

.outVis {
  opacity: 0;
}

.outInd {
  z-index: -1;
}

.maintabsection,
.outInd {
  position: relative;
}

.maintabsection {
  overflow: hidden;
}

.tab_btn {
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.stoptab {
  pointer-events: none;
}

.timestep {
  transition: all 500ms ease-in-out;
}

/* Новая логика активного таба */
.maintabsection .t-rec {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  z-index: 0;
  transition: opacity 0.35s ease;
}

.maintabsection .t-rec.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}