Функция не работает в мазиле, а вот в хроме и сафари все прекрасно отрабатывает

помогите, есть скрипт, в хроме и опере работает корректно но вот мазила не задает размеры стилей в классе baner_video. Если сравнивать: Это мазила

inset: 125px 40px;
width: 0px;
height: 0px;
border-radius: 0px;
display: block;

А это хром

inset: 202.19px 1702.23px 781.75px 862.921px;
    width: 839.308px;
    height: 579.56px;
    border-radius: 289.78px;
    display: block;

<div class="baner">
    <div class="container">
        <div class="baner_row">
            <div class="baner_items">
                <h1 class="baner_title hide-on-preloader">
                    <p>
                        Launch.</p>
                    <p>
                        Grow.
                    </p>
                    <p>
                        Become Successful.
                    </p>
                </h1>


            </div>
            <div class="baner_video hide-on-preloader">
                <img src="/assets/img/project/Case/iphone-14-pro-mockup-against-the-wall-front-view 1.png" alt="">
            </div>
            <div class="lottie-container" id="lottie-container">
                <dotlottie-player id="lottie-preloader" autoplay mode="normal"
                    src="/assets/lottie/preloader.lottie">
                </dotlottie-player>
            </div>
            <div class="baner_video_mobile hide-on-preloader">
                <img src="./assets/img/project/Case/iphone-14-pro-mockup-against-the-wall-front-view 1.png" alt="">
            </div>
            <div class="baner_info hide-on-preloader">
                <div class="baner_text">
                    <img src="./assets/img/icon.svg" alt="">
                    <p class="baner_text_main_w">We are the team of</p>
                    <p class="baner_text_main_t">top notch developers</p>
                    <p class="baner_text_main_h">who help founders to launch, scale and improve mind blowing mobile first  start-ups.</p>
                </div>
            </div>
        </div>
    </div>
</div>

const lottieAnim = document.getElementById("lottie-preloader");
const bannerVideo = document.querySelector(".baner_video");

let key1 = document.body.clientWidth > 1024 ? 200 : 150;
let key2 = document.body.clientWidth > 1024 ? 350 : 100;

let keyReached1 = false;
let keyReached2 = false;

lottieAnim.addEventListener("frame", ({ detail }) => {
  if (!keyReached1 && detail.frame > key1) {
    keyReached1 = true;
    document.body.classList.remove("preloader-running");

    const titleLines = document.querySelectorAll(".baner_title p");
    let lineIndex = 0;
    const intervalTimer = setInterval(() => {
      if (!titleLines[lineIndex]) return clearInterval(intervalTimer);
      titleLines[lineIndex++].classList.add("slide-down");
    }, 1000);
  }

  if (!keyReached2 && detail.frame > key2) {
    keyReached2 = true;
    recalcVideoSize();

    bannerVideo.style.display = "block";

    bannerVideo.classList.add("show");
    lottieAnim.classList.add("hide-preloader");
  }
});

window.onresize = () => {
  recalcVideoSize();
};

function recalcVideoSize() {
  const videoMask = lottieAnim.shadowRoot.querySelector(".video-mask");
  const videoBoundingRect = videoMask.getBoundingClientRect();

  bannerVideo.style.top = videoBoundingRect.top + "px";
  bannerVideo.style.bottom = videoBoundingRect.bottom + "px";
  bannerVideo.style.left = videoBoundingRect.left + "px";
  bannerVideo.style.right = videoBoundingRect.right + "px";

  bannerVideo.style.width = videoBoundingRect.width + "px";
  bannerVideo.style.height = videoBoundingRect.height + "px";

  bannerVideo.style.borderRadius = videoBoundingRect.height / 2 + "px";
}

Мне кажется что вот в этой функции не так для Мазилы

function recalcVideoSize() {
  const videoMask = lottieAnim.shadowRoot.querySelector(".video-mask");
  const videoBoundingRect = videoMask.getBoundingClientRect();

  bannerVideo.style.top = videoBoundingRect.top + "px";
  bannerVideo.style.bottom = videoBoundingRect.bottom + "px";
  bannerVideo.style.left = videoBoundingRect.left + "px";
  bannerVideo.style.right = videoBoundingRect.right + "px";

  bannerVideo.style.width = videoBoundingRect.width + "px";
  bannerVideo.style.height = videoBoundingRect.height + "px";

  bannerVideo.style.borderRadius = videoBoundingRect.height / 2 + "px";
}

Фото мазилы и хрома