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

9udxz4iz 于 12个月前发布在其他

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

我有一个img里面的picture风格与圆角和阴影：

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

个字符
首次在Safari（移动的或桌面）中加载时，阴影将仅显示在角落上，如下所示：

的数据
当页面刷新（或在其他浏览器中加载）时，图像周围会显示阴影：

的
我有一个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
我在使用蒙版对图像进行圆角处理时也遇到过同样的问题，因此每当元素的形状发生变化时，就会出现这种情况。
这个bug可以解决吗？

css

来源：https://stackoverflow.com/questions/69170035/drop-shadow-not-showing-on-sides-on-first-load-in-safari-when-using-a-border-rad

3条答案

按热度按时间

yeotifhr1#

我遇到了一个类似的问题。我已经搜索并找到了许多不同的解决方案。Safari似乎渲染过滤器：使用border-radius的元素上的下拉阴影不正确。现在我发现，在您的情况下，问题与此错误无关。img-elements上缺少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。

赞(0）回复(0）举报 12个月前

vmdwslir2#

给予一些填充物。这对我很有效

赞(0）回复(0）举报 12个月前

w80xi6nr3#

我发现添加：
transform：transform（0）;
解决了我在iOS（Safari）上制作动画时出现的 Flink 阴影。翻译不会在视觉上做任何事情，但会将渲染移动到GPU上。

赞(0）回复(0）举报 12个月前