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

我删除了以下代码：

using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging.AzureAppServices;
using Microsoft.Extensions.Logging;

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

transform-style：preserve-3d无法在Safari中使用？

2 个答案: