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

请参阅 这个 JSFiddle 进行演示。

Answer 1

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

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

要修复此行为：

在 TailwindCSS 中，您可以添加

transform-gpu

来强制渲染在 GPU 上正确进行。然后它就会像在 Chrome 中一样显示。

另一个有效的标签是

backdrop-blur-0

（CSS 中的

backdrop-filter: blur(0);

），因为 Safari 将始终在存在此过滤器的 GPU 上运行过滤。

链接到相关 GitHub 问题，其中包含渲染差异的照片。

Answer 2

如果您使用的是 Windows，Windows 上的 Safari 版本远远落后于当前 Mac 上的 Safari 版本。

• 在 Windows 上，当前 Safari 版本为 5.1，在 Mac 上为 9.1（最新版本）。

• Safari 5.1 不支持过滤样式，在我看来你不必担心它，因为大多数用户在 Windows 中不使用 Safari。

Answer 3

使用

will-change: filter;

对我来说效果很好。

Answer 4

Safari 9.1 版本支持投影滤镜。更新您的 Safari，问题将自动解决。

看

• http://www.w3schools.com/cssref/css3_pr_filter.asp
• http://caniuse.com/#feat=css-filters