Scroll snapping working fine inside of firefox but is delayed and inconsistent with google chrome

I have been building a portfolio website and wanted to use scroll snapping between sections, works exactly how I intended on firefox but on google chrome the snapping is largely delayed and causes you to jump between sections.

the code for the sections that use scroll snapping is

.main {
    margin-top:50px;
    height:calc(100vh - 50px);
    overflow:scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

.section {
    position:relative;
    min-height: calc(88vh - 50px);
    display:flex;
    flex-direction:column;
    justify-content:end;
    padding:6vh 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

@media screen and (max-width: 600px) {
    .section {
        justify-content: start;
    }
}

and if you want to view a working version of the site its currently up on abstractstudent.com if that would help identify the problem.

I just can't seem to figure out why the scroll snapping won't work inside of google chrome but works everywhere else