overflow hidden css safari not working but chrome yes

Question

I have an issue with safari explorer. I have a scroll indicator in the shape of a circle, that works fine in any borwser except safari.

So I have one layer (the div that doesn't move), but the ::before that shrinks as you scroll.

The issue on safari is that the layer that scrolls has a shape of square, the overflow hidden doesn't apply I guess.

Here's my html:

<div class="scroll-indicator__inner">
   ::before
</div>

For the css of the div :

.scroll-indicator__inner {
    position: relative;
    margin: 15%;
    height: 70%;
    width: 70%;
    border-radius: 50%;
    background-color: #9b003f;
    overflow: hidden;
}

And the css for the before :

.scroll-indicator__inner:before {
    content: "";
    background-color: #131313;
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    transform: translateZ(0) scaleY(calc(1 - var(--progress)));
    transform-origin: center bottom;
    transition: all .5s cubic-bezier(.215,.61,.355,1);
}