Баг с фоном, как исправить?

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

.container {
    max-width: 1277px;
    margin: 0 auto;
}
.wrapper {
    height: 2000px;
}
.page {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
}
.main-screen {
    flex: 1 0 100%;
    position: relative;

}
.main-screen__bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.ibg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.ibg img {
    display: none;
}

.nav {
    position: absolute;
    z-index: 50;
    width: 100%;
}

<div class="wrapper">
        <div class="page">
            <div class="nav">
                <div class="container">
                </div>
            </div>

            <div class="main-screen">
                <div class="main-screen__bg ibg">
                    <img src="img/BG-hero.png" alt="фон">
                </div>
            </div>
        </div>
    </div>

function ibg() {
    let ibg = document.querySelectorAll(".ibg");
    for (var i = 0; i < ibg.length; i++) {
    if(ibg[i].querySelector('img') ) {
    ibg[i].style.backgroundImage = 'url('+ibg[i].querySelector('img').getAttribute('src')+')';
            }
        }
    }

    ibg();