IOS 的跨浏览器兼容性问题

Question

我的问题出在 CSS3 中的动画框阴影。

Google(windows/android)

Safari/Google(IOS/MAC)

对于动画，我写了前缀 moz、webkit、o、default，但这不起作用。有什么问题吗？

.home__number {
width: 150px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 64px;
border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
-webkit-animation: home__item1 10s infinite;
-moz-animation: home__item1 10s infinite;
-o-animation: home__item1 10s infinite;
animation: home__item1 10s infinite;
}

@keyframes home__item1 {
0% {
  border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
  box-shadow: 0 -150px 70px -120px #6730ec inset,
   0 -220px 70px -120px #7984ee inset, 0 -280px 70px -120px #a9d2ff inset;
}
25% {
  border-radius: 58% 42% 75% 25%/76% 46% 54% 24%;
}
50% {
  border-radius: 50% 50% 33% 67%/55% 27% 73% 45%;
  box-shadow: 0 -140px 70px -120px #a9d2ff inset,
   0 -210px 70px -120px #7984ee inset, 0 -280px 70px -120px #6730ec inset;
}
75% {
 border-radius: 33% 67% 58% 42%/63% 68% 32% 37%;
}
100% {
 box-shadow: 0 -150px 70px -120px #6730ec inset,
  0 -220px 70px -120px #7984ee inset, 0 -280px 70px -120px #a9d2ff inset;
}

}

其他关键帧写的一样。

Answer 1

这不是完整的答案，因为我没有解决方法，但这里是对该问题的一个小探索，以防它有助于您的调查。

从 CSS 中剥离除框阴影之外的所有内容，我们仍然可以在 IOS Safari 中看到一个问题，在 Windows 10 中的 Edge 上不存在。这是最简单的代码，用红绿蓝对比：

div {
  width: 150px;
  height: 150px;
  box-shadow: 
    0 -150px 70px -120px red inset,0 -220px 70px -120px green inset,0 -280px 70px -120px blue inset;
}

<div></div>

Edge 给出了预期的结果：

和 IOS Safari 提供：

事实上，如果我们只使用一个框阴影，您可以看到左侧仍然有一个垂直条。

到目前为止，我尝试过的任何方法（例如最小化模糊）都没有消除该栏，但可能值得尝试，例如，在前面放置另一种 'dummy' 颜色，看看是否可以以某种方式最小化。（它是第一个被当作方框阴影中'on top'的颜色）。

编辑：从那以后我发现了这个 https://medium.com/@andrea.verlicchi/inset-box-shadow-rendering-bug-on-safari-ios-13-4-6bf4256a1ee0，它报告了一个黑色垂直条并将其与 IOS13 中插入框阴影上的大负模糊半径相关联，但我一直无法看看如何使用他们的解决方法。

IOS 的跨浏览器兼容性问题

Cross-browser compatibility problem with IOS

css

cross-browser