CSS 只有 translateZ 的视差效果在 iOS Safari 上不起作用

Question

两个 HTML 元素，header 和 main。滚动时，页眉比页面流慢。这种视差效果是通过 CSS 属性透视 / 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>

Answer 1

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

顺便说一句，由于 IOS 13，translateZ 对其不起作用，也没有解决方法。它似乎也在 IOS 14.

上再次工作

CSS 只有 translateZ 的视差效果在 iOS Safari 上不起作用

CSS only parallax effect with translateZ not working on iOS Safari

css

parallax