CSS only parallax effect with translateZ not working on iOS Safari

Question

Two HTML elements, header and main. When scrolling, the header is slower than the page flow. This parallax effect is achieved with the CSS properties perspective / transform:translateZ.

According to caniuse.com, those properties should work not only on desktop browsers, but also on iOS safari - which they don't.

Why not?

/*
    --perspective: 5px;
    --distance: -2px;
*/
body {
    overflow: hidden;
    margin: 0;
}

.wrapper {
    perspective: 5px;
    perspective-origin: center top;
    position: relative;
    height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
}

header {
    height: 200px;
    max-width: 100%;
    background-image: url(https://placekitten.com/1200/400);
    background-size: cover;
    /* (perspective — distance) / perspective = scaleFactor */
    transform: translateZ(-2px) scale( calc(7 / 5));
    transform-origin: 50% top;
}

main {
    height: 200vh;
    background-image: linear-gradient( #ccf, #a00);
}

    <div class="wrapper">
        <header></header>
        <main>Lorem ipsum dolor<br> sit amet consectetur adipisicing elit.<br> Ea vero necessitatibus delectus<br>ullam hic! Aliquam voluptatem pariatur vero vel nesciunt, eius velit commodi labore voluptatibus amet quidem aspernatur itaque ad.</main>
    </div>

Answer 1

this question is duplicate of this one: CSS only Parallax Scrolling stoped working with IOS/PadOS13?

BTW its because of IOS 13, translateZ does not work on it and there is no workaround. also seems its working again on IOS 14.