легкое подергивание при прокрутке вниз по домашней странице 5 div

Question

У меня есть 5 div, которые представляют домашнюю страницу. Каждый div занимает 100% vh. Когда я прокручиваю каждый div, первые 3 получаются плавными, но как только я нажимаю на 4-й div, когда я прокручиваю вниз, он становится немного резким. Я пробовал отключить JS в браузере. Я снизил фоновые изображения до действительно низкого разрешения, например 400 КБ, и это не решает проблему. Есть ли что-нибудь еще, что может вызвать прерывистую прокрутку? Это особенно заметно при использовании трекпада MacBook, поскольку прокрутка двумя пальцами довольно плавная. Не думаю, что это было бы заметно на мышке Windows. Единственные элементы в div - это фоновое изображение, занимающее весь фон, и кнопка в центре.

    <div id="photography" class="image-portfolio-section">   
            <div class="image-portfolio-button-container">
                <a style="text-decoration:none;" class="motion-gallary-button-white" href="country.php">IMAGE PORTFOLIO</a>
            </div>
    </div>

css styling:

.image-portfolio-section { 
background-image: url('../assets/DSC_3214-min.JPG');
height: 100vh;
background-size: cover;
background-position: center;
margin-bottom: .3rem;
display: grid;
grid-template-rows: repeat(4, 1fr); 
}

.image-portfolio-button-container{

grid-row: 3 / 4;
display: grid;
width: 280px;
height: 4rem;
justify-self: center;
text-decoration: none;
align-self: center;
}

.image-portfolio-button-container a:hover {
background-color: #967549;
color: #fff;
}

У меня также есть javascript на странице, но это относится к другим div и не этот div с отрывистой прокруткой.

    <script src="https://apis.google.com/js/platform.js"></script>
    <script src="js/purecookie.js"></script>

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>


    $(window).ready(function() {
        let centerLogoOne = Array.from(document.querySelector('.home-center-logo-one').children);
        centerLogoOne.forEach((item) => { 
        item.style.animation = 'fadeIn ease ' + Math.random()*10 + 's';
        });

        let wildLifeWordOne = Array.from(document.querySelector('.videoWordOne').children);
        wildLifeWordOne.forEach((item) => {
            item.style.animation = 'fadeIn ease ' + Math.random()*10 + 's';
        });

        let wildLifeWordTwo = Array.from(document.querySelector('.videoWordTwo').children);
        wildLifeWordTwo.forEach((item) => {
            item.style.animation = 'fadeIn ease ' + Math.random()*10 + 's';
        });

        let wildLifeWordThree =          Array.from(document.querySelector('.videoWordThree').children);
        wildLifeWordThree.forEach((item) => {
            item.style.animation = 'fadeIn ease ' + Math.random()*10 + 's';
        });


        const mq = window.matchMedia( "(max-width:768px)" );

        if (mq.matches) 
        {
            let video = document.querySelector('video');
            video.setAttribute('autoplay','true');
            video.setAttribute('muted','true');
            video.setAttribute('loop','true');
            video.setAttribute('playsInline','true');
            video.setAttribute("src", "assets/Mobile_Background.mp4");
        }

    });



</script>