转换风格:保留-3D在safari中不起作用？

Question

我尝试使用transform-style: preserve 3D进行视差滚动。它在android和chrome中很好用，但在Safari中似乎不起作用。我已经使用了autoprefixer和add -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。

另外，请检查此url：https://caniuse.com/#feat=transforms3d

Answer 2

我删除这些代码：

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

它可以在ios和safari上工作。我不知道为什么。