transform-style：preserve-3d在Safari中不起作用？

Question

我尝试采用变换风格的视差滚动：preserve-3d。它在Android和Chrome中很好，但它似乎在Safari中不起作用。我已经使用autoprefixer并添加-webkit-。为什么没有效果？

 position: relative;
    height: 100vh;
    overflow: scroll;
    overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    perspective: 400px;
    -webkit-perspective: 400px;

Answer 1

请将以下css添加到您的css代码-webkit-backface-visibility: hidden; /* I added this */

这将适用于3.1,3.2的safari的上述版本。

另请检查此网址：https://caniuse.com/#feat=transforms3d

Answer 2

我删除这些代码：

transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;

它可以在ios和safari上运行。我不知道为什么......