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

【问题标题】：How to remove white border on lazy loaded images in Safari如何在 Safari 中删除延迟加载图像上的白色边框
【发布时间】：2022-08-24 10:40:47
【问题描述】：

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

如果图像无法加载，这似乎与发生的事情相同，并且可以通过使用 Safari 的“开发”菜单禁用图像来复制。

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

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

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

有谁能帮忙吗？这甚至可能吗？谢谢

外观示例：

【解决方案1】：

已在此处回答：chrome/safari display border around image

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

如果检测到 Safari，这是一个使用clip-path 删除图像边缘的 hack：

@media not all and (min-resolution:.001dpcm) {
  img[loading="lazy"] {
    clip-path: inset(0.5px);
  }
}

【讨论】：