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

ruyhziif 于 2023-01-10 发布在其他

关注(0)|答案(3)|浏览(138)

我在我网站的图片上添加了一个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的演示。

css

来源：https://stackoverflow.com/questions/38762661/css-drop-shadow-not-working-properly-in-safari

3条答案

按热度按时间

91zkwejq1#

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

在Windows上，目前的Safari版本是5.1，在Mac上是9.1（最新版本）。
Safari 5.1不支持过滤器样式，在我看来，你不应该担心它，因为大多数用户都没有在Windows中使用Safari。

赞(0）回复(0）举报 2023-01-10

1u4esq0p2#

Safari支持9.1版本的投影过滤器。更新您的Safari，问题将自动解决。
参见：http://www.w3schools.com/cssref/css3_pr_filter.asp

: http://caniuse.com/#feat=css-filters

希望这对你有帮助。

赞(0）回复(0）举报 2023-01-10

ckx4rj1h3#

Safari选择渲染投影滤镜的方式时偶尔会出现问题。有时可以，有时不能。
在内部，Safari会做一些计算来决定是在cpu还是gpu上运行过滤器，基于溢出或布局选择，它可能会错误地选择cpu。

- 要修复此行为：**

在TailwindCSS中，你可以添加transform-gpu来强制渲染在gpu上正确发生，然后它会像在Chrome中一样出现。
另一个可以工作的标签是backdrop-blur-0（css中的backdrop-filter: blur(0);），因为Safari将始终在存在此过滤器的GPU上运行过滤。
Link to relevant GitHub Issue with photos of rendering differences.

赞(0）回复(0）举报 2023-01-10

我来回答

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

3条答案

相关问题

热门标签

最新问答