CSS - 阴影在 Safari 中无法正常工作

Question

我在我网站上的图像上添加了一个 drop-shadow 过滤器。它在 Firefox 和 Chrome 中运行正常，但在 Safari 中运行不正常。

我尝试了以下代码:

.ui-tabs .ui-tabs-nav li {
  list-style: outside none none;
}
.tabed_setting_div a > img {
   filter: drop-shadow(5px 5px 5px #000);
  -webkit-filter: drop-shadow(5px 5px 5px #000);
  -moz-filter:  drop-shadow(5px 5px 5px #000);
  -ms-filter:  drop-shadow(5px 5px 5px #000);
  -o-filter: drop-shadow(5px 5px 5px #000);
}  

请参阅this JSFiddle用于演示。

Answer 1

有时，Safari 选择呈现投影滤镜的方式会出现问题。有时有效，有时无效。

在内部，Safari 会进行一些计算来决定是在 cpu 上还是在 gpu 上运行过滤器。基于溢出或布局选择，它可能会错误地选择 cpu。

要修复此行为:

在 TailwindCSS 中，您可以添加 transform-gpu 以强制渲染在 gpu 上正确发生。然后它将像在 Chrome 中一样显示。

另一个可行的标签是 backdrop-blur-0(backdrop-filter: blur(0); 在 css 中)，因为 Safari 将始终运行过滤存在此过滤器的 GPU。

Link to relevant GitHub Issue with photos of rendering differences .