How can I get Blink-based browsers to let me scroll through the whole content when using perspective?

I’m trying to implement a parallax scrolling effect, and while it works well on Safari and Firefox, Blink-based browsers (i.e., Chrome, Edge, and Opera) keep giving me trouble and I haven’t been able to get them to work. The problem is the content gets clipped, for some reason. Just for testing purposes, this is what I basically have right now:

<div class="outer-wrapper>
    <main>
        <article>...</article>
        <article>...</article>
        <article>...</article>
    </main>
</div>

Which is styled as such:

.outer-wrapper {
    height: 100vh;
    perspective: 1px;
    perspective-origin: 0 0;
    overflow-x: hidden;
}

main {
    transform: translateZ(-1px) scale(2);
    transform-origin: 0 0;
    overflow: hidden;
}

article {
    position: relative;
    height: 100vh;
}

Each article element has a height of 100vh, and main’s height gets correctly calculated to be 300vh, but its container will not show it in its entirety. With the above code, for instance, I can only see the first two articles, and scrolling beyond that is not a possibility on the aforementioned browsers. In other words, Chrome-based browsers will only show two thirds of main (i.e., 200vh), and nothing I have tried for the past few days has been able to resolve it. I’ve also tried setting the perspective and transform’s origins to the bottom right, by the way (which gets rid of some extra blank space on Safari and Firefox), but Chrome-based browsers will keep presenting the same problem.

Does anybody have any idea why this might be happening and how I could fix it? I feel like I’ve run out of things to try at this point.