scroll-snap-type: x not working on mobile but oworks on web

I've implemented this carosel with automatic X scrolling:

https://codepen.io/Schepp/pen/WNbQByE

Works great! One thing, it does NOT work great on mobile. It's stuck on the first image and does not work. happens on iOS and android, and also even happens when looking at inspector (cmd+shift+c) and toggling device toolbar (cmd+shift+m) for viewing for mobile.

Why is scroll-snap not working for mobile?

This is reproducible on the codepen link when inspecting toggling device toolbar as stated above, but if it helps, here is my code:

HTML:

<div class="about-slides-container">
    <section class="carousel" aria-label="Gallery">
        <ol class="carousel__viewport">
        <li id="carousel__slide2"
            tabindex="0"
            class="carousel__slide">
            <img class="canvas-block-image about-me-image" src="./assets/9.jpeg" alt="About">
            <div class="carousel__snapper"></div>
        </li>
        <li id="carousel__slide1"
            tabindex="0"
            class="carousel__slide">
            <img class="canvas-block-image about-me-image" src="./assets/8.jpeg" alt="About">
            <div class="carousel__snapper">
            </div>
        </li>

        </aside>
    </section>
</div>

CSS:

    @keyframes tonext {
        75% {
        left: 0;
        }
        95% {
        left: 100%;
        }
        98% {
        left: 100%;
        }
        99% {
        left: 0;
        }
    }
    
    @keyframes tostart {
        75% {
        left: 0;
        }
        95% {
        left: -300%;
        }
        98% {
        left: -300%;
        }
        99% {
        left: 0;
        }
    }
    
    @keyframes snap {
        96% {
        scroll-snap-align: center;
        }
        97% {
        scroll-snap-align: none;
        }
        99% {
        scroll-snap-align: none;
        }
        100% {
        scroll-snap-align: center;
        }
    }

  
    ol, li {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .carousel {
        position: relative;
        height: 100%;
        filter: drop-shadow(0 0 10px #0003);
        perspective: 100px;
        width: 100%;
        pointer-events: none;
    }
    
    .carousel__viewport {
        pointer-events: none;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        counter-reset: item;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        -webkit-scroll-snap-type: x mandatory;
    }
    
    .carousel__slide {
        position: relative;
        flex: 0 0 100%;
        width: 100%;
        counter-increment: item;
    }
    
    .carousel__snapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        scroll-snap-align: center;
    }
    
    @media (hover: hover) {
        .carousel__snapper {
        animation-name: tonext, snap;
        animation-timing-function: ease;
        animation-duration: 4s;
        animation-iteration-count: infinite;
        }
    
        .carousel__slide:last-child .carousel__snapper {
        animation-name: tostart, snap;
        }
    }
    
    @media (prefers-reduced-motion: reduce) {
        .carousel__snapper {
        animation-name: none;
        }
    }