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

9udxz4iz  于 12个月前  发布在  其他
关注(0)|答案(3)|浏览(126)

我有一个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可以解决吗?

yeotifhr

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。

vmdwslir

vmdwslir2#

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

w80xi6nr

w80xi6nr3#

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

相关问题