Дергаются элементы при скролле в safari. Как исправить?

Question

[Liliya_47]

С touchpad, сенсорным экраном и apple mouse нормально работает, но с обычной мышкой возникают проблемы при скролле в safari - элементы внутри section дергаются начинают дергаться при скролле.

Код:

<section id="mission" class="section mission_text">
        <div>
            <h2 class="bold" style="animation-play-state: running;">Наша миссия — помочь вам автоматизировать <br> бизнес-процессы. Делаем на совесть.</h2>
            <h4 style="animation-play-state: running;">Познакомься с нашей командой</h4>
        </div>
        <div class="mission_arrow" onclick="sidebarScrollToBlock('team');" style="animation-play-state: running;"></div>
        <img class="mission_text_ball" src="assets/images/bg/yellow-ball-378x400.svg" alt="">
    </section>

html {
    height: 100%;
    -webkit-scroll-snap-type: y mandatory;
    scroll-snap-type: y mandatory;
    overscroll-behavior: none;
    scroll-behavior: smooth;
}
section {
    width: 100%;
    max-width: 1372px;
    margin: 0 auto;
    max-height: 100vh;
    height: 100vh;
    -webkit-scroll-snap-align: start;
    scroll-snap-align: start;
    overflow-x: hidden;
    overflow-y: hidden;
}
.mission_text {
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    transition: all linear 1s;
}
.mission_text h2 {
    width: fit-content;
    margin: 0 auto;
    letter-spacing: 1.44px;
}
.mission_text h4 {
    margin-top: 2.66vh;
    color: var(--text-lighter-black);
    text-align: center;
    letter-spacing: 0.72px;
}
.mission_arrow {
    cursor: pointer;
    margin: 5.77vh auto 0;
    width: 78px;
    height: 38px;
    background: url("../images/icons/arrows-down.svg") center no-repeat;
}
.mission_text_ball {
    position: absolute;
    right: -250px;
    bottom: 100px;
    transform: rotate(30deg);
    opacity: 0.6;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transform:translateZ(0px);
    -moz-transform:translateZ(0px);
    -o-transform:translateZ(0px);
    transform:translateZ(0px);
}