Linear scrolling inside a snap scrolling container on Safari

Expected Behaviour:
A container has snap scrolling on divs,
1 to 4 divs are snap,
the 5th one is a container, with linear scrolling inside,
You can scroll up too.

My issue:
On safari (13.1.1) on macOS (Catalina 10.15.5) using the touchpad, once you have reached the linear scroll container, you can no longer scroll up using the touchpad, you are lock to the linear scrolling container and can not scroll on the rest of the body anymore.

It works as intended on macOS with safari when using a mouse with a scrollwheel.
Works as intended too on macOS with the touchpad on Chrome or Firefox, or using Windows & Linux on all browsers and using touchpads and scrollwheels.

Demo: https://codepen.io/0swin/pen/eYZWwWy

<template>
    <div id="app">
        <div class="snap-container">
            <div v-for="i in 4" class="slide snap">
                {{ i }}
            </div>
            <div class="slide snap" style="overflow-y: scroll;">
                <div class="slide" style="background: #b794f4;">
                    5
                </div>
                <div class="slide" style="background: #f6e05e;">
                    6
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {};
</script>

<style>
.snap-container {
    scroll-snap-type: y mandatory;
    height: 100vh;
    width: 100vw;
    overflow-y: scroll;
    overflow-x: hidden;
}

.slide {
    height: 100vh;
    width: 100vw;
    color: white;
    font-weight: bold;
    font-size: 3rem;
    overflow-x: hidden;
}

.snap {
    scroll-snap-align: center;
}

.snap:nth-child(odd) {
    background: #f56565;
}

.snap:nth-child(even) {
    background: #63b3ed;
}
</style>