如何在 Safari 中删除延迟加载图像上的白色边框

Question

我使用标准标签向网站上的图像添加一些本机延迟加载loading="lazy"。它工作正常并且完成了我想要的工作，但在 Safari（桌面版和移动版）中，加载之前的图像有一个白色边框，我似乎无法摆脱它。当您滚动时，它只会出现短暂的闪烁，但在其他黑暗的网站上尤其明显且烦人！

这似乎与图像加载失败时发生的情况相同，并且可以通过使用 Safari 的“开发”菜单禁用图像来复制。

我尝试用我能想到的所有 CSS 来删除它......

border: none !important;
outline: none !important;
border-color: #000 !important;

...但没有运气摆脱它。

有人能帮忙吗？这可能吗？谢谢

其外观示例：

Answer 1

这是 Safari 15 中的错误：https://bugs.webkit.org/show_bug.cgi ?id=243601

这是一个clip-path在检测到 Safari 时删除图像边缘的技巧：

@supports (font: -apple-system-body) and (-webkit-appearance: none) {
  img[loading="lazy"] {
    clip-path: inset(0.6px)
  }
}

该错误在几个版本前已修复，但直到Safari 16.4才发布稳定版本

Answer 2

这已在这里得到解答：chrome/safari display border around image

如果您向下滚动到主要答案下方，Simon_Weaver 会给出详细的答案以及延迟加载条件的解决方案。