仅CSS的视差效果，translateZ无法在iOS Safari上使用

问题描述

两个HTML元素，标头和主要。滚动时，标题比页面流慢。 这种视差效果是通过CSS属性Perspective / transform：translateZ实现的。

根据caniuse.com，这些属性不仅应在桌面浏览器上运行，而且应在iOS Safari浏览器上运行，而后者则不能。

为什么不呢？

/*
    --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>

解决方法

此问题与该问题重复： CSS only Parallax Scrolling stoped working with IOS/PadOS13?

BTW是因为IOS 13， translateZ 无法在其上运行，也没有解决方法。似乎也可以在iOS 14上再次使用它。