IOS跨浏览器兼容性问题答案

【问题标题】：Cross-browser compatibility problem with IOSIOS跨浏览器兼容性问题
【发布时间】：2020-12-04 18:40:44
【问题描述】：

我的问题在于 CSS3 中的动画 box-shadow。

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

.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;
}

}

其他关键帧的写法相同。

【问题讨论】：

标签： css cross-browser

【解决方案1】：

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

从 CSS 中剥离除 box-shadow 之外的所有内容后，我们仍然可以在 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;
}

&lt;div&gt;&lt;/div&gt;

Edge 上的哪个给出了预期的结果：

并且在 IOS Safari 上提供：

事实上，如果我们只使用一个盒子阴影，你可以看到左边还有一个竖条。

到目前为止，我没有尝试过任何尝试，例如最小化模糊，但它可能值得尝试，例如在前面放置另一种“虚拟”颜色，看看是否可以在某些情况下将其最小化方法。（它是框阴影中“顶部”的第一种颜色）。

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

【讨论】：