css - 使用边框半径时，在 Safari 中首次加载时，两侧不会显示阴影

Question

我在带有圆 Angular 和阴影样式的图片内有一个img:

img {
  border-radius: 22%;
  filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.75));
}

<picture>
  <source type="image/webp" srcset="https://cdn.crispedge.com/c78b95.webp" />
  <source type="image/png" srcset="https://cdn.crispedge.com/c78b95.png" />
  <img width="100" height="100" src="https://cdn.crispedge.com/c78b95.png" />
</picture>

首次在 Safari(移动或桌面)中加载时，阴影只会显示在 Angular 落，如下所示:

刷新页面(或在其他浏览器中加载)时，图像周围会显示阴影:

我有一个 JSFiddle 演示了这一点:https://jsfiddle.net/s0dy5jwa/17/show

当使用多个元素时，我看到了更奇怪的结果。例如，以下内容将缺少第一个图像顶部和最后一个图像底部的阴影。

<code>img</code> inside <code>picture</code>
<br/>
<picture>
  <img width="100" height="100" src="https://cdn.crispedge.com/c78b95.png" />
</picture>
<br/>
Just an <code>img</code> with PNG
<br/>
<img width="100" height="100" src="https://cdn.crispedge.com/c78b95.png" />
<br/>
Just an <code>img</code> with WebP
<br/>
<img width="100" height="100" src="https://cdn.crispedge.com/c78b95.webp" />

演示:https://jsfiddle.net/s0dy5jwa/22/show

当使用蒙版使图像变圆时，我发现了同样的错误，因此每当元素的形状发生变化时似乎都会发生这种错误。

这个错误可以解决吗？

Answer 1

我遇到了类似的问题。我搜索并找到了许多不同的解决方案。 Safari 似乎无法在使用 border-radius 的元素上正确渲染 filter:drop-shadow 。现在我发现在你的情况下，问题与这个错误无关。您的 img 元素上缺少 overflow:visible。

img {
  border-radius: 22%;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.75));
  overflow: visible;
}

https://jsfiddle.net/s0dy5jwa/22/

但就我而言，投影仍然被父级 div 切断。奇怪的是，它随机呈现正确或在重新加载时被切断。对我来说，最终起作用的是:

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

我必须对图像进行分组并在父级上使用drop-shadow，如本例所示:https://twitter.com/joshwcomeau/status/1407811337984647169

这是一个类似的解决方案，代码为:Why is filter(drop-shadow) causing my SVG to disappear in Safari?

如果仍然无法正确渲染，请务必为其添加前缀 (-webkit-filter:drop-shadow) 或尝试使用 ems 而不是 px。