Тег img не рендерит браузер после overflow:hidden

const background = document.querySelector(".background");
const images = document.querySelectorAll(".background img");

let counter = 0;
function onChangeBackground() {
    let size = images[0].clientWidth;
    if (counter < images.length - 1) {
        background.style.transition = "transform 0.4s ease-in-out";
        counter++;
        background.style.transform = 'translateX(' + (-size * counter) + 'px)';
    } else {
        background.style.transition = "transform 0.4s ease-in-out";
        counter = 0;
        background.style.transform = 'translateX(' + (-size * counter) + 'px)';
    }
}

window.onload = function () {
    setInterval(onChangeBackground, 2000);
};

.d-flex {
    display: -ms-flexbox !important;
    display: flex !important;
}

.header {
    z-index: 70;
    position: relative;
    width: 100%;
    height: 92vh;
}

.background {
    z-index: 75;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.background img {
    width: 99%;
    height: 91vh;
}

<header class="header">
    <div class="background d-flex">
        <img src="https://wallbox.ru/wallpapers/main/201124/65c50262df5270a1437e7d6a257d6766.jpg" alt="" />
        <img src="https://wallpaper-mania.com/wp-content/uploads/2018/09/High_resolution_wallpaper_background_ID_77701368619.jpg" alt="" />
        <img src="https://motaen.com/upload/wallpapers/2017/09/10/10/36/54072/150502878259b4eaaecb1a08.56773495.jpg" alt="" />
    </div>
</header >