Safari中动态添加img元素时object-fit: cover失效，请问有解决方法吗？

这是WebKit内核长期存在的一个未完全修复的渲染bug：当使用客户端路由（无整页刷新仅更新URL的导航方式）时，如果Safari命中了图片资源缓存，动态插入的img替换元素不会触发完整的布局重计算流程，导致object-fit这类作用于替换元素内容的CSS属性没有被正确应用到渲染树上。

• 强制触发元素重绘：动态插入img元素后，执行以下代码强制Safari重新计算元素样式：

const targetImg = document.querySelector('你插入的img对应的选择器')
targetImg.style.display = 'none'
// 读取offsetHeight会强制浏览器同步计算布局
void targetImg.offsetHeight
targetImg.style.display = 'revert'

• 改用背景图实现同等效果：放弃img标签+object-fit: cover的方案，将图片地址设置为外层容器的背景图，配置background-size: cover、background-position: center即可实现完全相同的展示效果，该方案兼容性极强，不会触发Safari的该类渲染bug。
• 给img元素添加微型重绘动画：给所有需要应用object-fit的img元素添加以下CSS规则，强制Safari主动触发元素绘制流程：

/* 无感知的重绘触发动画 */
@keyframes safari-fix {
  0% { opacity: 1; }
  100% { opacity: 1; }
}
.target-img {
  animation: safari-fix 0.001s;
}

• 调整动态img的属性赋值顺序：创建img节点时，先设置所有样式、插入到DOM树中，最后再给img的src属性赋值，避免Safari命中缓存时跳过样式计算步骤。

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