Safari首次加载带border-radius元素时drop shadow侧边不显示如何解决

可行的修复方案 #

方案1：拆分样式到父容器（兼容性最好，支持透明背景图片）

将border-radius、overflow: hidden和阴影滤镜都设置在picture父元素上，img仅保留尺寸等基础属性，避开Safari对同时修改形状和添加滤镜的img元素的渲染异常。
代码示例：

/* 给picture父元素加样式 */
picture {
  display: inline-block;
  border-radius: 22%;
  overflow: hidden;
  filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.75));
}
picture img {
  display: block;
  /* 无需给img加border-radius和filter属性 */
}

方案2：强制触发元素重绘

给同时设置了圆角和滤镜的img元素添加GPU渲染触发属性，强制Safari首次加载时完整计算元素形状和投影范围：

img {
  border-radius: 22%;
  filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.75));
  /* 以下属性二选一即可，优先使用transform */
  transform: translateZ(0);
  /* will-change: filter; */
}

方案3：非透明背景图可替换阴影类型

如果你使用的是无透明区域的图片，直接用box-shadow代替drop-shadow即可避开该bug：

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

内容的提问来源于stack exchange，提问作者Joseph Duffy