transform-style:preserve-3d 在 Safari 中不起作用？答案

【问题标题】：transform-style:preserve-3d not working in safari?transform-style:preserve-3d 在 Safari 中不起作用？
【发布时间】：2019-06-23 06:51:02
【问题描述】：

我尝试通过 transform-style: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;

【问题讨论】：

标签： css browser safari

【解决方案1】：

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

这将适用于 3.1、3.2 以上版本的 safari。

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

【讨论】：

【解决方案2】：

我删除这些代码：

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

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

【讨论】：