使用 Safari 时过滤器投影失败

Question

在使用包含过渡的

drop-shadow

过滤器时，我遇到了 Safari 浏览器 (~ v16.4) 的问题。

它应该从几年前就得到支持：https://caniuse.com/?search=drop-shadow。

尽管如此，这里的示例在 Chrome 和 Firefox 上运行良好，但在 Safari 上失败：

function test() {
    $('.round-shadow').each(function(index) {
        $(this).toggleClass('hover');
    });
    setTimeout(test,600);
}
test();

.round-shadow {
  display: block;
  width: 200px;
  height: 200px;
  margin: 20px auto;
  background: #efefef;
  border-radius: 50%;
  filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.75));
}

.round-shadow > div {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
}

.round-shadow img {
  transition-duration: 0.3s;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.57, 0.21, 0.69, 1);
}

.round-shadow.hover img,
.round-shadow:hover img {
  transform: scale(1.05, 1.05);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="round-shadow">
  <div>
    <img src="https://placekitten.com/240/240">
  </div>
</div>

有人可以解释为什么 Safari 渲染失败，以及修复它的最佳方法是什么？

---

一个修复似乎是使用 box-shadow，因为它可以正确识别

border-radius

:

.round-shadow {
  /*filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.75));*/ 
  box-shadow: 4px 4px 8px rgba(0, 0, 0, .75);
}

Answer 1

面临同样的问题，

使用

drop-shadow-lg

和

hover:drop-shadow-2xl

配合顺风，但它会导致圆角和阴影的 css 过渡的奇怪行为。

对于顺风用户使用

shadow-lg

和

hover:shadow-2xl

似乎可以解决这个问题。 （类似于OP，@wittich的回答）

很奇怪...