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

Question

我正在使用标准

loading="lazy"

标签向网站上的图像添加一些本机延迟加载。它工作正常并且可以完成我想要的工作，但是在 Safari（桌面和移动）中，加载之前的图像有一个我似乎无法摆脱的白色边框。它只会在您滚动时出现短暂的闪烁，但在一个原本黑暗的网站上特别明显和烦人！

如果图像加载失败似乎会发生同样的事情，并且可以通过使用 Safari 的“开发”菜单禁用图像来复制。

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

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

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

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

外观示例：

Answer 1

这里已经回答了：chrome/safari display border around image

如果您向下滚动到主要答案下方，

Simon_Weaver 给出了有关延迟加载条件解决方案的详细答案。

Answer 2

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

如果检测到 Safari，这里有一个使用

clip-path

删除图像边缘的 hack：

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

显然 bug 已修复但尚未发布.

Answer 3

您可以查看 Safari Webkits 以更改某些内容，例如滚动条等。